クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え

以前CSSだけでドット絵がかけるのか、というシリーズをやってて、中断していたのですが、ツイッターで素敵なドット絵マリオ作品に出会ってまたモチベーションが湧いてきました。今回は立ちポーズを作って、ジャプポーズとhoverアクションで切り替えるところまで。あいも変わらずバニラCSSでポチポチ打ってますw

※目次:

※参考:前回の記事
CSS変数でドット絵マリオをルイージにしたった! - クモのようにコツコツと

今後のためにベースの無色16マスをベースを作成

ツイッターで出会った作品、こちらです。box-shadowで作られていて、さらにジェネレーターまで提供されています。凄すぎます!

※参考:box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

ドット絵マリオ、私もやってたこと思い出した。頑張らないと!そう、バニラCSSでね!!*1

前回はいきなりジャンプポーズから入ったので、遅ればせながら今回は立ちポーズです。

まず作り始めてすぐに思ったのですが、前のジャンプポーズを複製して改造したところ、どこまでが前回でどこまでが今打ってるいるドットなのか、わけがわからなくなったw

今後のこともあるので、無色の16マスのベースを作りました。

:root {
  /*肌色*/
--Hada: #facd89;
--None: none;
}

.mario{
/*マリオ服*/ 
--Fuku: #ff0000;
/*マリオ他*/
--Hoka: #638c0b;  
}

まずCSS変数を一つ追加。無色の部分も--None: none;としました。その方が見た目が揃ってドットが打ちやすい。

/********* ベース *******/
/*1行目*/
.hoge li:nth-child(1) img:nth-child(1) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(2) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(3) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(4) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(5) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(6) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(7) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(8) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(9) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(10) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(11) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(12) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(13) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(14) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(15) {background: var(--None);}
.hoge li:nth-child(1) img:nth-child(16) {background: var(--None);}

(以下略)

こんな感じで増やして行くと…

こうなります。右側の正方形部分です。

マリオ立ちポーズを打つ

それでは、このベースを立ちマリオにしていきましょう!

/********* マリオ(スタンド) *******/
/*1行目*/
.mario_s li:nth-child(1) img:nth-child(1) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(2) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(3) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(4) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(5) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(6) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(7) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(8) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(9) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(10) {background: var(--Fuku);}
.mario_s li:nth-child(1) img:nth-child(11) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(12) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(13) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(14) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(15) {background: var(--None);}
.mario_s li:nth-child(1) img:nth-child(16) {background: var(--None);}

(以下略)

ジャンプするマリオはclass名を.mario_j、立ちマリオはmario_sにしてみました。

でけたぞーー!打っている間、無心になれましたw

途中、ボタンが現れて新たな一色か?と思ったら肌色と同じ色でした。目の錯覚で黄色く見える。ミニマル3色が貫かれているなー。

hoverアクションで切り替え

次にこの2枚をhoverアクションで切り替えたい。立ちポーズがベースでカーソルを載せるとジャンプポーズにしたい。

まずHTML。

<div class="space">

<ul class="mario mario_j">
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
  (中略)
</ul>

<ul class="mario mario_s">
  <li><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img><img></li>
 (中略)
</ul>
  
 </div>

全体を.spaceのdiv要素で囲います。2つのul要素にはmario_jmario_sを追加。

次にCSS

/********* 表示切り替え *******/
.space {
  display: inline-block;
}


.space .mario_j {
  display: none;
}

.space:hover .mario_j {
  display: block;
}

.space:hover .mario_s {
  display: none;
  
}
  • .spaceはインラインブロックにする。(横幅いっぱいじゃなくて子要素のサイズになる)
  • .spacemario_jは非表示に。
  • .spaceをhoverするとmario_jが表示になる。
  • .spaceをhoverするとmario_sが非表示になる。

こんなんでました!カーソルをマリオの上に載せてみてくだせい。スマホはマリオ叩いて欄外をまた叩くと切り替わります*2

たった2コマだけど、ポーズが変わるとなんだか愛嬌ありますね、マリオw

今後の予定

f:id:idr_zz:20181030215154j:plain

次にやりたいこと

  • スマホでも動きが変わらないようにhoverじゃなくてタッチアクションにしたい。
  • CSSアニメで上にジャンプさせたい(加速減速があるような動き)
  • tone.jsでトゥ〜ン♪という音を作ってタッチと同時に鳴らしたい

それではまた!

*1:SCSSなどのAltCSSで作れそうですが今後のテーマということで

*2:hoverはPCとスマホで挙動が異なるのが難点