⌨️

【個人開発】前田デザイン室のドット素材が最高だったので、タイピングゲームを作った

2022/02/13に公開

まとめ

前田デザイン室が最近公開した「DOTOWN」のドット素材を使って、英語のタイピングゲームを作った。

実装は Nextjs (ホスティング先は firebase) を使って開発をした。

前田デザイン室とは、元・任天堂デザイナーである前田高志さんが率いるクリエイティブ集団のことで、最近 DOTOWN というドット素材サイトを公開した。商用問わず無料で使える上、一つ一つの素材のクオリティがとても高いのでおすすめです。

当サイトで配布している素材は規約の範囲内であれば、基本的に連絡（クレジット表記）の必要なしで個人、法人、商用、非商用問わず無料でご利用頂けます。商用のホームページ・広告・ゲーム・アイコンなど様々な媒体でご利用いただけます。

Dot Typing
https://dot-typing.web.app

①ドット絵をふんだんに使いたかった、②ドット絵がファミコンを想起させる、③個人的に英語の勉強をしたかった等の理由でタイピングゲームを作った。

「一つのお題に対してタイピングをして、正解したら次のお題」というより、「画面内に複数のお題が点在していて、その中から好きなものを選んでタイピングをしていく」スタイルにしたかった（わちゃわちゃ感を出したかった）ため、横スクロールのタイピングゲームとした。

ドット絵を表示してアニメーションで動かしているだけのとてもシンプルな内容（特に難しい実装もしていない）

ドット絵の移動アニメーションには、framer-motionと呼ばれるライブラリを使用した。

バリエーション豊かなアニメーションパターンを用意したかったが、面倒だったため断念。

大量の画像を表示していて、アニメーションさせているため、画面がもっさりしている。ここら辺を上手に捌けるようになりたい。
ドットの世界で統一したかったため、フォントやモーダルの枠、Twitter アイコンなどもドットにした。
本番環境で一部の画像が表示されない（大量の画像を用意しているせい？調査中）
とにかくもっさりしていて、気持ち悪いけど、作ったからには一応公開しておこうと思って、公開した。
ヘルプボタンもキーボード操作で開きたいが、面倒だったため未実装。ヘルプの開閉、リトライ、Twitter シェアなど、全ての動作をキーボード操作で完結させる（タイピングゲームで、マウスいじるの面倒なはずなので）
ゲームのレベル調整が適当なので、初めは簡単なワード、途中から文字数の長いワードを出題するなどの工夫をする。
ドット絵に合わせたアニメーションパターンを用意する（例えば UFO なら真上から下に移動してくるなど）。アニメーションパターンをリッチにすれば、もう少し面白そうに見えるはず。
DOTOWN のクレジットを目立つところに記載する。

前田デザイン室の　DOTOWN の良質な素材のおかげで、適当に作ったタイピングゲームがそれっぽくなりました。ありがとうございます👏