Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】いかに手をかけずに、CSSで歩くキャラクターを描くか

HTMLなど

　どうも！LSSです！！

最近、こんな事を考えていました。

「迷路ゲームを作成するにあたり、自キャラもこの際コードで描きだしたい。また、どうせなら４方向の画像、かつ手足を振って各２パターン用意。ただし、極力労力をそれにさきたくない！」
とｗ

そうして考えているうちに、

radial-gradientで描いた円で構成されたキャラなら手軽そう
考えてつめてみると、「８つの円」があれば表示位置すら変えず、「表示する・しない」「表示順の前後だけの調整」で要件は満たせるのでは？

と思い至り、それで実際に描いてみました。

歩くキャラクター
コード
今回のサンプルでは

歩くキャラクター

コード

<style>
@keyframes test1a{
0%,50%{
background:
radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 33px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
51%,100%{
background:
radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 33px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
}
@keyframes test2a{
0%,50%{
background:
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
51%,100%{
background:
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
}
@keyframes test3a{
0%,24%{
background:
radial-gradient(5px 5px at 33px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
25%,49%,75%,100%{
background:
radial-gradient(5px 5px at 33px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 27px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 27px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%)/*胴*/
;
}
50%,74%{
background:
radial-gradient(5px 5px at 33px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
}
@keyframes test4a{
0%,24%{
background:
radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
25%,49%,75%,100%{
background:
radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 27px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 27px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%)/*胴*/
;
}
50%,74%{
background:
radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;
}
}
.test1,.test2,.test3,.test4{
display:inline-block;
border:1px solid black;
width:54px;
height:54px;
background-repeat:no-repeat;
}
.test1{animation:test1a 1s linear infinite;}
.test2{animation:test2a 1s linear infinite;}
.test3{animation:test3a 1s linear infinite;}
.test4{animation:test4a 1s linear infinite;}
</style>
<div class="test1"> </div>
<div class="test2"> </div>
<div class="test3"> </div>
<div class="test4"> </div>

今回のサンプルでは

アニメーションにすると左右向きの移動がちょっと不自然だったため、そこのみ手足が真ん中にくる状態を挟んでいます。

それ以外は、

右目
左目
頭
胴
右手
左手
右足
左足

の８つの円、サイズ・位置を全く変えずに「表示するかしないか・表示前後順」を変えるだけで、歩行パターンが完成しました^^

４方向×２パターン＋左右時の中間２パターン＝計１０パターンなのでコードが長くなっていますが、１つの絵あたりでいうと、

background:
radial-gradient(5px 5px at 21px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 33px 23px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(15px 13px at 27px 23px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*頭*/
radial-gradient(5px 5px at 15px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 35px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(12px 13px at 27px 38px,#ffffaa 90%,#000000 91% 99%,#00000000 100%),/*胴*/
radial-gradient(5px 5px at 39px 40px,#ffffaa 80%,#000000 81% 99%,#00000000 100%),
radial-gradient(5px 5px at 19px 47px,#ffffaa 80%,#000000 81% 99%,#00000000 100%)
;

↑この程度のコード量だったりします。

…目だけでももうちょっと凝ってみても良かったかも？

表示位置・サイズを変えていない事から、JavaScriptで作る場合には容易に１パターンを元に８パターン生成できそうです^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^