「アニメーションアプリ開発」の難所とは？

こんにちは。サトルです。

アニメーションアプリの作成に取り組んでいるのですが、HTMLのCANVASでアニメーションを描くためにさまざまな描画方法について勉強しています。

簡単なロケットのイラストをアニメーションさせるには、「画像の表示位置の管理」や「表示座標の変更」など、新しいスキルを身に付けていく必要がありました。

まだまだ自分には難しく感じる部分もたくさんありますが、アニメーション作成の過程について書いていきたいと思います。

アニメーションアプリ開発の「ハマりどころ」とは？

アニメーションの機能の作り方を学ぼうと、まず、シンプルな「自機」のキャラクターを作りそれを動かすことができる「アニメーションアプリ」作成に取り組んでいきました。

まず、描画用の関数を作り、それを、30FPSくらいの速度で実行し、画面を更新していくことで、アニメーションができるかどうかを試していきました。

プログラムを書いて実行して、そのまた繰り返しという形で、アニメーションの機能を作っていったのですが、「座標の指定位置」について、「画像の中心」がプログラムで指定している座標だと思い込んでいたので、何度も画面にはみ出してしまい、そのことに気づくまで結構時間がかかってしまいました。

CANVASも左上が原点だったので、画像についても左上が原点となっているみたいです。

きちんと調べたらわかることなのですが、学校では「座標は真ん中が原点」と習っていたので、「自分の常識」はプログラムの世界では通用しないということを実感しました。

あと、Y座標は「上がプラス方向」では無くて「下がプラス方向」というところも学校で習う「数学の座標」とは違っているところでした。

プログラムを書くときにも「自機の画像を下方向に動かしたい」ときには「自機のY座標」を増やしていかないといけません。

この考え方に慣れるまでしばらく時間がかかりました。

「習うより慣れろ」と言いますが、まさにそんな体験が数日続きました。

考え方に慣れればこっちのもので、プログラミング速度も日に日に上がっていき、２～３日ほどかかりましたが、やっとアニメーションアプリが出来上がりました。

上下左右のCANVASの端にロケットがぶつかったら方向を変えるだけのシンプルなアニメーションですが、初心者がここまで作るのはかなり苦労しました。

シューティングゲームを作るためには「ロケットを動かせる」ようにしないといけないため、キーボードのキーのタイプによって「ロケットを動かせる仕組み」を作っていくことが必要です。

今回は「矢印キー」で自機を操作し、「Sキー」でミサイルを発射する仕組みを作っていきたいと思います。

「Javascript」でキーの入力を受け付けるプログラムは、下記のような感じになります。

if(e.keyCode === キー番号 ){
    // キー番号のキーが押されたときの処理 
}

「キー番号って何？」と思っていたのですが、どうやらキーボードのキーに割り当てられた番号のことを表しているみたいです。

ただ、ブラウザごとに対応が違うみたいで、そこは統一してほしいところです。

今回は「練習用」のプログラムなので、ブラウザは限定して作っていきたいと思います。

そもそも、プログラミング初心者なので、全部「練習」なんですが・・・

ここでも「ロケットの操作」をどのように作ればいいのかイメージが涌かなかったので、いろいろな方法を試行錯誤しながら進めていきました。

エンジニアの友人に聞いて解決したい「誘惑」と戦いながら、なんとか自力で作成できたのは嬉しかったです。

「自分で調べて、自分で考えて、自分で作る」ことにプログラミングを学ぶ喜びがあるんだな～と実感しました。

「手取り足取り教えてもらってたら、いつまでたっても自分でプログラムを作れるようにはならないよ。」

と言われたことが生んだ「葛藤」ですが、正直に話すと「楽してプログラムを作りたい」というのが本音です。

プログラミング学習は「自分との闘い」なんだと日々感じています。

そして、できたのはこんな感じの「ロケットが操作できるアプリ」です。

もっと簡単にできると思っていたのですが、今回もかなり考えが甘く、想定の２倍ほど時間がかかりました。

わからないことを調べながらプログラムを作るのは本当に時間がかかりますね(^_^;)

次回は、ミサイルを撃てるようにしていきたいと思います。

HOMEへ