⌨️

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

2022/02/13に公開

まとめ

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

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

前田デザイン室 / DOTOWN について

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

https://dotown.maeda-design-room.net/

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

作ったもの

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

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

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

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

使い方

  1. ドット絵が出現したら、ドット絵の名前を入力する
  2. ミスなく文字を入力してエンターを押すと、そのドット絵が消える
  3. タイピングが間に合わず、車や人にぶつかるとゲームオーバー

アニメーション

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

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

作った感想・工夫した点・今後の実装など

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

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

Discussion

ログインするとコメントできます