enchant.jsを用いたキャラクターの表示
まずは基本的なことからです。
今回はcode.9leapでナイトを表示してみます。
ムーンブロックではパペットブロックを配置して「出現」を置くだけで
キャラクターを画面に表示できましたね。
プログラムの場合は下記のように書きます。
少し長いですが、1行1行どんな処理をしているか考えながら
下のプログラムを入力してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
enchant(); // Knightコンストラクタをつくる Knight = Class.create(Sprite, // Spriteの機能を継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara5.png']; this.x = x; this.y = y; this.frame = 0; game.rootScene.addChild(this); }, }); window.onload = function() { game = new Game(320, 320); game.preload('chara5.png'); game.onload = function() { knight = new Knight(0, 0); // 一人目のナイト作成 } game.start(); } |
ちなみに、多いですが、今まで学んだものばかりなので。
小さく分割して考えていきましょう。
下記はプログラムとMOONBlockをざっくり対応させた図です。
青い部分がknightのコンストラクタでknightの元になるものですね。
それを画面に表示する際にNewをつけてknightのインスタンスを生成する流れに
なっています。実際の結果は下記の通りです
実際の結果
ナイト表示してみよう
課題
- ナイトの最初の表示位置を画面の中心にしてみよう。
