Webゲーム制作の授業、今回はその２として画像描画についてです。
Webゲームづくりに欠かせない画像表現
授業ではenchant.jsというライブラリ（プログラムのパーツ）を使って、効率よくプログラミングを行うことで、体験重視の授業になるよう工夫していました。
また、ゲームを作るときに画像の表現は欠かせないものですが、その点についてもライブラリを使うことで最低限のプログラムで好きな絵を表示させたりコントロールすることができました。
授業で配布したプリントは次のようなものです。
Spriteを使った画像の描画
今日のMission
１．enchant();を書く場所と、役割が説明できる。
２．画像を表示するためのプログラムの書き方が説明できる。
３．Spriteクラスのプロパティframeと、画像ファイルの関係を説明できる。
＜演習問題例＞
１）準備
①code.9leap.netにログインする。
②http://code.9leap.net/codes/show/150992からフォークする。
③画面下の方にあるAssets Listを確認し、画像のファイル名をチェックする。
２）５行目に、enchant.jsライブラリを使うときに、必ず書く１行書いてください。
３）クマの表示
画面上にクマを表示するために、『適切な場所』に下記の記述をする。カッコの形に注意。
①game.preload('chara1.png');
② var bear = new Sprite(32,32);
bear.image = game.assets['chara1.png'];
bear.frame = 0;
４）クマを変える。
画面上に表示された茶クマを、白クマや女の子のクマに変える。
チャレンジ問題
１）クマのアニメーション
％演算子を使って、クマをアニメーションさせる。２）game.fpsの値を変えて、アニメーションの速度がどうなるか確認してみましょう。
授業のながれ
授業の冒頭１０分程度で説明を行った後は、全員が達成できることを目指して、学生が自由に課題に取り組みます。教室内の立ち歩きも相談も自由です。学生が自主的に教室のホワイトボードを使って、ミニ授業をおこなっても構いません。
全員が達成するためには協働が求められます。様々なコミュニケーションスキルを学ぶ機会にもなります。
またプリント中の演習問題例は、Missionを達成するための作業として私から例示していたもので、学生自身で例題を考えて授業に取り組んでも構いません。つまりMissionが達成できるのであれば、例題を解かないことを選べます。
クラス全体としての達成度については授業の最後で確認をします。
プログラミングを楽しむ
作ったものが動きはじめるのは、誰にとっても驚きや楽しさがあることだと思います。
それを繰り返し体験しながら試行錯誤を重ねていけるのが、プログラミングの良いところです。
