子供の頃に、喫茶店にあるテーブルゲームで、インベーダーゲームに憧れていた、ユゲタです。
当時子供だったのでお金もなく、デパートなどに置かれているテーブルゲームの横で、人がやっているゲームを指を加えて見ているだけだったのですが、自分でプログラミングをしてゲームすれば良いことに気がついたのは、中学1年の時でした。
ここからIT人生の始まりだったんですね。
そんな、憧れゲームの一つの、インベーダーゲームを、今回はjavascript-canvasで構築してみたいと思います。
可能な限り、忠実に再現してみたいと思いますね。
本日のIT謎掛け
「インベーダーゲーム」と、かけまして・・・
「毎朝並んでいるパチプロのコンテスト」と、ときます。
そのココロは・・・
弾（玉）を撃って（売って）、相手に勝ちます。
事前準備の前段階
インベーダーゲームを作ると軽く考えてみましたが、簡易に有り物の素材を使って作らずに、ドット絵の再現からやってみたいと思います。
また、音も再現したいので、音源をどこからか持ってこなければいけませんね。
そして、想像する最も難しそうな点としては、「TOCHIKA」（トーチカ）と呼ばれる、敵の攻撃から自機を守ってくれる壁が、弾が当たったら崩れていく様をどうやって表現するかがポイントになりそうです。
とりあえず、初回の今回は、画像関連の素材を用意したいと思います。
ちなみに、インベーダーゲームの敵キャラなど、それぞれに名前がついていたのを、wikipediaを見て知りました。
https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%82%A4%E3%83%B3%E3%83%99%E3%83%BC%E3%83%80%E3%83%BC
カニ・タコ・イカなんですね。
なんかピザみたい・・・
画像の準備
どこぞのサイトから、ダウンロードすればいいや・・・的な簡易に考えていましたが、著作権もあるし、そうそう便利な素材が落ちているわけもないので、腹をくくって、自作してみたいと思います。
大掛かりな素材は難しいのでwikipediaに掲載されているドット絵を見ながら作れる程度の物を用意します。
その為に、ドット絵が作れるエディタをインストールするところからはじめますが、photoshopが手元にある人は、それでもいいし、どんなドットエディタを使ってもらってもいいかと思いますが、この作業をする環境がmacなので、「Firealpaca」というフリーソフトを使ってみたいと思います。
ダウンロードサイト :
http://firealpaca.com/ja/
ドットエディタと言いつつ、アンチエイリアスがデフォルトでONになっていたり、ピクセルサイズが、デフォルトで1000とかなっているので、ペイントツールに近いかもしれません。
ペンサイズを1pxにしたりアンチエイリアスを切ったりして、16x16のドット絵モードを作る設定にカスタマイズして、素材作成スタートです。
カニ(CRAB)
タコ(OCTOPUS)
イカ(SQUID)
UFO
CANON
準備完了
透過PNGで保存しましたが、できれば、色数なども設定させてほしかった・・・
ドットエディタの機能が物足りませんでしたね。
そうした場合は、自分で作るに限るんですが、今回のインベーダーを作り終えたら取り掛かりましょう。
次回は、作った素材を画面に配置して、アニメーションさせてみたいと思います。
お楽しみに！
