【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_j、mario_sを追加。

次にCSS

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


.space .mario_j {
  display: none;
}

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

.space:hover .mario_s {
  display: none;
  
}

• .spaceはインラインブロックにする。（横幅いっぱいじゃなくて子要素のサイズになる）
• .spaceのmario_jは非表示に。
• .spaceをhoverするとmario_jが表示になる。
• .spaceをhoverするとmario_sが非表示になる。

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

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

今後の予定

次にやりたいこと

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

それではまた！

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

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