表示するキャラを変える

まずはここから。 作業環境はやはりcode.9leap.netを使う前提で書いていきます。

どれから改変するかは好み次第ですが、今回は変えやすそうなところから変えてみましょう。

作ってみる場合ですが、要所要所のソースは残しておくために、ひと段落着いたら「Finished」で終了し、再編集は「Fork」を使うようにします。 ・・・まあ、無くなってもまた書けばいいんですが。

キャラクターをクマから人にする

例としてchara7.pngとchara6.pngを使っていますが、これにこだわる必要はありません。自作画像でもいいですし、フリー素材を検索してきて試してもいいと思います。（ただし、フリー素材利用の際は、そのサイトの利用規約を守ってくださいね）

1. まず、人用の画像を読み込みます
   • 「Add Resources」から「chara7.png」を選択します
   • もう一回「Add Resources」から「chara6.png」を選択します
2. game.preload の値を変更します
   • ('chara1.png','icon0.png')　→ ( 'chara7.png','chara6.png','icon0.png' )
   • chara1はクマ画像、icon0はリンゴです。リンゴの改変も後でする以上は要らなくなりますが、とりあえずここではそのまま読み込み対象にしておきます。
3. プレイヤー側の画像を変更します(Playerの中)
   • this.image = game.assets['chara1.png']; → this.image = game.assets['chara7.png'];
   • this.frame = 5; → this.frame = 10; // ここの値は好きなものでOK
   • このほか、別素材を利用する場合はその素材の使用に沿って下記の箇所も変えます
   • enchant.Sprite.call(this, 32, 32 );
4. 敵側の画像を追加・変更します(Enemyの中)
   • this.image = game.assets['chara1.png']; → this.image = game.assets['chara6.png'];
   • game.rootScene.addChild(this);の上あたりに、frame の値を追加します。→ this.frame = 9; // ここの値は好きなものでOK
   • ここのframe値も好きなものを入れていいが、scaleX = -1があるので、画像が水平に反転することに注意。
   • このほか、別素材を利用する場合はその素材の使用に沿って下記の箇所も変えます
   • enchant.Sprite.call(this, 32, 32 );

いまのところこんな感じになっているかと思います。バック走で敵が迫ってくるので、リンゴを背面トスして倒します。

今回はここまでです。

＊この時点のmain.js

enchant(); // initialize

window.onload = function(){

var game = new Core(320, 320);
game.preload('chara7.png', 'chara6.png', 'icon0.png'); // preload image
game.fps = 20;

game.onload = function(){

    // make new class for player
    var Player = enchant.Class.create(enchant.Sprite, {
        initialize: function(){
            enchant.Sprite.call(this, 32, 32);
            this.image = game.assets['chara7.png'];
            this.frame = 10;                   // set image data
            game.rootScene.addChild(this);     // add to canvas
        }
    });

    // make new class for apple
    var Apple = enchant.Class.create(enchant.Sprite, {
        initialize: function(){
            enchant.Sprite.call(this, 16, 16);
            this.image = game.assets['icon0.png']; // set image
            this.moveTo(16, player.y + 8);       // move to the position
            this.tl.moveBy(320, 0, 30);        // set movement
            this.frame = 15;                   // set image data
            game.rootScene.addChild(this);     // add to canvas
        }
    });

    // make new class for enemy
    var Enemy = enchant.Class.create(enchant.Sprite, {
        initialize: function(){
            enchant.Sprite.call(this, 32, 32);
            this.image = game.assets['chara6.png']; // set image
            this.moveTo(320, Math.floor(Math.random() * 320)); // set position
            this.scaleX = -1;
            this.tl.moveBy(-360, 0, 160);      // set movement
            this.frame = 9;                   // set image data
            game.rootScene.addChild(this);     // canvas
        }
    });

    var player = new Player();

    // generate enemy every 60 frames
    game.rootScene.tl.then(function() {
        var enemy = new Enemy();
    }).delay(30).loop();                    // wait 60 frames and loop it!

    // add event listener (called when click/touch started)
    game.rootScene.on('touchstart', function(evt){
        player.y = evt.localY;    // set position to touch-y position
        var apple = new Apple();
    });

    // add event listener (called when click/touch moved)
    game.rootScene.on('touchmove', function(evt){
        player.y = evt.localY;    // set position to touch-y position
    });

    var score = 0;

    game.rootScene.on('enterframe', function(){
        var hits = Apple.intersect(Enemy);
        for(var i = 0, len = hits.length; i < len; i++){
            game.rootScene.removeChild(hits[i][0]);
            game.rootScene.removeChild(hits[i][1]);
            score ++;
        }
    });

    player.tl.delay(game.fps * 10).then(function(){
        alert('game over! score: ' + score);
        game.stop();
    });  
};
    game.start(); // start your game!
};