Web系

Adobe XDのドット絵に対抗し、CSSでドット絵を書いてみた。

どうも、こんにちは。
三重から来たフロントエンドエンジニアをやってる三浦です!

さて、今年も寒い季節になりましたね・・・。
もうこたつから出ることができません。

やっとの思いでこたつから出て、食器洗いの時、洗剤を出そうとしても、、、
出ませんでした。
中身凍ってました。ジェル状になって出てきませんでした。

こたつから出ることも、洗剤を出すことも出来ない時、
こんな記事を見つけました。

私が書いたこの記事の、1つ前の記事ですね、
皆さんはもう見ましたか?
XDのアートボードでドット絵!すごい!斬新!

よし、同じことCSSでしよう!

何のキャラクターだかわかりませんが、同じのをhtmlとcssで作ってみようと思います。

はい、できました。

・・・。
どこからか声が聞こえてきました。

22:25
Miura(脳内), Miura(本人)
  • Miura(脳内)22:20
    なんかよくわかんないけど・・・、
    前のXDの記事と、同じじゃねーかよ!

  • Miura(本人)22:21
    やっぱり?w

やっぱり?

薄々そんな気がしないでもないでもなかったです。
いやでも、これすごい苦労してるんです。
HTMLはこんな感じになっています。

長いので、省略しましたが、

256個のdivタグでできています・・・

divタグ1つを、1ドットにして
CSSで色を付けて、ドット絵を完成させています。

結論

「なんかよくわかんない!」

ですよね・・・!
このまま終わると、記事としてまずいですよね。
インパクトにかけますよね。
わかりました!

最後におまけ!

では、ほんの少しだけ、
インパクトにかけないように、
「XD」と「HTML&CSS」で、見た目でわかる違いを付けてみます。

000320
1-1

なんかそれっぽい雰囲気になりました。
※注意!これはゲームではありません。

  • jumpを押せばジャンプします!
  • bigを押せばいつでも巨大化できます
  • いくつか怪しい挙動あります、許してください

それと、歩いているようなアニメーションを作りたかったのですが、
すみません、今回は時間がありませんでした。

流石に、ブロックと背景はイラレで作って画像としておいていますが、
何時間・・・いや、何日もかければ、全てをdivで、画像を使わずに
HTML&CSSだけで作り上げる事は可能です。
そうなれば・・・たぶん、膨大な作業量になり、禿げることでしょう。

最後になりますが、

  • ドカンを「jump」で必死に避けてくれた方
  • ビックリマークのブロックを叩いてアイテム出そうとした方

申し訳ありませんでした。
ただの背景です。

最後まで見て頂き、ありがとうございました!

The following two tabs change content below.
三浦太輝

三浦太輝

フロントエンドエンジニア(CP2)株式会社トラパンツ
好きな事はアクアリウム、いつか部屋中を水槽で埋め尽くしたい。部屋一面のレッドビーシュリンプ水槽に囲まれて暮らしたい。そこでコーディングしていたい。 嫌いなものは、エビ。食べれません。触れません。吐き気がします。