こんにちはうえむーです！
今回はPug / SCSSでスイカゲームをオマージュしたHTMLゲーム作成したことについてお話しします。
Meguro.cssでCSSに関するLTを行いました。
HTMLゲームを作ろうとしたきっかけ
HTMLゲームを作ろうとしたきっかけは、ConnpassでMeguro.cssのイベントを見つけて、
CSS好きなので面白いCSSアニメーションに関するLTをやりたいのがきっかけです。
でも、最初は何を作ろうか決められず、もくもく会の交流会で主催者と何を作ればいいのかを相談して
「今年流行っているものでいいのでは？」とアドバイスをいただき、スイカゲームをオマージュしたHTMLゲームを作ろうと決めました。
制作の流れ
HTMLゲームを作るのはいいがLT大会まであと2週間しかない！
と思い色々と準備して実装しました。
絵コンテを作る
まずが、アニメーションの動きをイメージしやすくするために絵コンテを作成しました。
絵コンテは映像作品の撮影前に用意されるイラストによる表で、動画のイメージを具現化するための設計図のようなものです。
(手書きでごめんなさい！)
素材集め・SVG化する
次は素材集めです。最初はHTML・CSSなどのロゴをPug / SCSSで作成しようかと思いましたが、
時間がなさすぎてSVG化することにしました。
「Vectorizer.AI」というツールを使ってSVG化しました。
上記のツールはPng・jpg画像などのビットマップ画像をドラッグあんどドロップするだけで、ベクター変換できる優れたツールです。
以下がビットマップ画像からベクター変換した様子です。
ご覧になる通り、精度が高く無料で使えるみたいなのでお勧めします。
デザイン作成・実装
素材が揃い終わったらFigmaで以下のように作成してWebPack・Pug・SCSSで実装しました。
完成したのがこちらになリます。
スイカゲームのように、CSS・HTMLを回転させたり、オシャレ感を出すようにニューモーフィズムで実装したりしました。
GitHubのコードも展開しますのでもしよろしければ見てください。
作って思ったこと
久々にCSSでアニメーションを作成しましたが、完成したときの達成感も大きいし
絵を描くような楽しさが実感します。
時間があったらまた何か作ろうかと思います。