cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

cocos2d-html5で画面遷移

| 2014/04/03 | Android, iPhone, javascript | コメントはまだありません

cocos2d-JS 3.0シリーズの続きです。
コードメインなので少し長くなりますが、スプライトシートの使い方や画面遷移、メニューオブジェクトの利用など雛形として利用できるように記述しているので、参考にしてみてください。
*自分の雛形なので綺麗では無い箇所もあると思います。

画面遷移を実装する

メニューボタンとヘルプボタンを表示して、ゲーム画面、結果画面への遷移を実装してみたいと思います。

NumberPuzzle

素材準備

背景が単色だと気分が乗らないのでTOP画面だけ背景を準備しました。
*適当に準備して下さい

メニューはスプライトシートから読み込んで横に並べます。
利用したスプライトシート

Spritesheets

利用したplist

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
	<dict>
		<key>frames</key>
		<dict>
			<key>sprite_sheet0000</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0001</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{100,0},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0002</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{200,0},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0003</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{300,0},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0004</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{400,0},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0005</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{0,100},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0006</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{100,100},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0007</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{200,100},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0008</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{300,100},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet0009</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,100}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{400,100},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_button0000</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{162,62}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{162,62}</string>
				<key>spriteSourceSize</key>
				<string>{162,62}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{0,200},{162,62}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_button0001</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{162,62}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{162,62}</string>
				<key>spriteSourceSize</key>
				<string>{162,62}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{162,200},{162,62}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_button0002</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{162,62}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{162,62}</string>
				<key>spriteSourceSize</key>
				<string>{162,62}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{324,200},{162,62}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_button0003</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,0},{162,62}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{162,62}</string>
				<key>spriteSourceSize</key>
				<string>{162,62}</string>
				<key>spriteTrimmed</key>
				<false/>
				<key>textureRect</key>
				<string>{{0,262},{162,62}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0000</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{162,262},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0001</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,-1}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{262,262},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0002</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{362,262},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0003</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{0,362},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0004</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{100,362},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0005</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{200,362},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0006</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{300,362},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0007</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{400,362},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0008</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{0,462},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
			<key>sprite_sheet_drag0009</key>
			<dict>
				<key>aliases</key>
				<array/>
				<key>sourceColorRect</key>
				<string>{{0,1},{100,100}}</string>
				<key>spriteOffset</key>
				<string>{0,0}</string>
				<key>spriteSize</key>
				<string>{100,101}</string>
				<key>spriteSourceSize</key>
				<string>{100,100}</string>
				<key>spriteTrimmed</key>
				<true/>
				<key>textureRect</key>
				<string>{{100,462},{100,100}}</string>
				<key>textureRotated</key>
				<false/>
			</dict>
		</dict>
		<key>metadata</key>
		<dict>
			<key>format</key>
			<integer>3</integer>
			<key>size</key>
			<string>{512,1024}</string>
			<key>target</key>
			<dict>
				<key>name</key>
				<string>spritesheets.png</string>
				<key>textureFileName</key>
				<string>spritesheets</string>
				<key>textureFileExtension</key>
				<string>png</string>
				<key>premultipliedAlpha</key>
				<true/>
			</dict>
		</dict>
	</dict>
</plist>

利用準備

リソースに追加します。

var res = {
	i_bg_home : "res/image/bg_home.png",    
	i_sprite_sheets : "res/image/spritesheets.png",
	i_sprite_sheets_plist : "res/image/spritesheets.plist"    
};

var g_resources = [
    //image
	res.i_bg_home,
	res.i_sprite_sheets,
    //plist
	res.i_sprite_sheets_plist
    //fnt
    //tmx
    //bgm
    //effect
];

スプライトシートに画像をキャッシュします。

cc.game.onStart = function(){
    cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL);
	cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        //スプライトシートの準備
        cc.spriteFrameCache.addSpriteFrames(res.i_sprite_sheets_plist,res.i_sprite_sheets);
        //ホームの表示
        cc.director.runScene(new HomeScene());
    }, this);
};
cc.game.run();

src/scene/ResultScene.jsを追加する予定なので、project.jsonに追加します。

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : false,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/scene/homeScene.js",        
        "src/scene/gameScene.js",
        "src/scene/resultScene.js"
    ]
}

コード記述

スプライトシートからの読込ですが、main.jsでキャッシュしたスプライト画像からplistに定義されている名称で切り取り位置を取得し、frameとして切り出します。
切り出したframeからspriteを生成することで画像を取り出すことが出来ます。

//サンプルコード
var frame = cc.spriteFrameCache.getSpriteFrame('sprite_sheet_button0000').getRect();
var sprite = cc.SpriteFrame.create(frame);

それではMenuItemSpriteを生成してMenuの追加を行ってみましょう。

//ホームシーンの定義
var HomeScene = (function(){
    //画面レイヤーの定義
	var Layer = cc.Layer.extend({
        //初期化
        init : function () {
            /*********
            * 共通処理 *
            *********/ 
            this._super();
            var size = cc.director.getWinSize();
            /**********
            * 背景の描画 *
            **********/
            var bg_img =  cc.Sprite.create(res.i_bg_home);
            bg_img.setAnchorPoint(cc.p(0,0));
            bg_img.setPosition(0,0);            
    		this.addChild(bg_img,1);            
            /*************
            * メニューの描画 *
            *************/ 
			//メニューの表示
			var menu = cc.Menu.create(
                //スタートボタン
                cc.MenuItemSprite.create(
                    cc.Sprite.create( cc.SpriteFrame.create(res.i_sprite_sheets,cc.spriteFrameCache.getSpriteFrame('sprite_sheet_button0000').getRect()) ),
                    cc.Sprite.create( cc.SpriteFrame.create(res.i_sprite_sheets,cc.spriteFrameCache.getSpriteFrame('sprite_sheet_button0001').getRect()) ),
                    null,
                    'onGame',
                    this
            	),
                 //ヘルプボタン
                cc.MenuItemSprite.create(
                    cc.Sprite.create( cc.SpriteFrame.create(res.i_sprite_sheets,cc.spriteFrameCache.getSpriteFrame('sprite_sheet_button0002').getRect()) ),
                    cc.Sprite.create( cc.SpriteFrame.create(res.i_sprite_sheets,cc.spriteFrameCache.getSpriteFrame('sprite_sheet_button0003').getRect()) ),
                    null,
                    'onHelp',
                    this
            	)
            );
            menu.alignItemsHorizontallyWithPadding (30);
            menu.setPosition(size.width / 2, size.height/2);
    		this.addChild(menu,2);
            return true;
        },
        //ゲーム開始
        onGame : function(){
            //ゲーム開始画面へ遷移
            var transition = cc.TransitionFade.create(1.0,new GameScene());
            cc.director.pushScene(transition);
            //追加済みのイベントを削除
            cc.eventManager.removeAllListeners();            
            //追加済みのオブジェクトを解除
            this.removeAllChildren();
        },
        //ヘルプの表示
        onHelp : function(){
            // TODO ヘルプ画面への遷移
        }
    });
    //画面定義の返却
    return cc.Scene.extend({
        onEnter:function () {
            this._super();
            var layer = new Layer();
            layer.init();
            this.addChild(layer);
        }
    });
})();

ゲームロジックは後々記述するとして、特定位置にドラッグしたらゲームクリアになるようにしてみました。

//ゲームシーンの定義
var GameScene = (function(){
    //画面レイヤーの定義
	var Layer = cc.Layer.extend({
        //プロパティ
        obj : null,
        touched : null,
        trap : null,
        //初期化
        init : function () {
           /*********
            * 共通処理 *
            *********/ 
            this._super();
            var size = cc.director.getWinSize();
            /**********
            * ゲーム画面 *
            **********/   
            //罠の位置
            this.trap = cc.p(100,100);
            //TODO ゲームの実装
            this.obj = cc.LabelTTF.create("GoMove!", "Arial", 38);
            this.obj.setPosition(size.width / 2, size.height/2);
            this.addChild(this.obj,1);
			//タッチイベント
            var self = this;
            var touch = cc.EventListener.create({
                event: cc.EventListener.TOUCH_ALL_AT_ONCE,
                swallowTouches: true,                
                //タッチ開始
                onTouchesBegan:function (touches, event) {
                    self.touched = touches[0].getLocation();
                },
                //タッチ移動
                onTouchesMoved:function (touches, event) {
                    self.touched = touches[0].getLocation();                    
                },
                //タッチ終了
                onTouchesEnded:function (touches, event) {
                    self.touched = null;
                },
                //タッチキャンセル    
                onTouchesCancelled:function (touches, event) {
                    self.touched = null;
                }
            });
			cc.eventManager.addListener(touch,this);
            this.scheduleUpdate();
            return true;
        },
        //フレーム更新    
        update : function(dt){
            //メッセージの移動
            var pos = this.obj.getPosition();
            pos = cc.p(pos.x,pos.y);
            if(this.touched){
                pos.x = this.touched.x;
                pos.y = this.touched.y;
                this.obj.setPosition(pos);
            }
            //クリア判定
            if(cc.pDistance(pos,this.trap)<30){
            	this.onResult();                
            }
        },
        //クリア画面
        onResult : function(){
            //ゲーム開始画面へ遷移
            var transition = cc.TransitionFade.create(1.0,new ResultScene());
            cc.director.pushScene(transition);
            //追加済みのイベントを削除
            cc.eventManager.removeAllListeners();            
            //追加済みのオブジェクトを解除
            this.removeAllChildren();
        },        
    });
    //画面定義の返却
    return cc.Scene.extend({
        onEnter:function () {
            this._super();
            var layer = new Layer();
            layer.init();
            this.addChild(layer);
        }
    });
})();

ゲームクリア後はトップ画面へ戻れるようにします。

//結果シーンの定義
var ResultScene = (function(){
    //画面レイヤーの定義
	var Layer = cc.Layer.extend({
        //初期化
        init : function () {
           /*********
            * 共通処理 *
            *********/ 
            this._super();
            var size = cc.director.getWinSize();
            //画面タップでHomeへ移動
            var self = this;
            this.scheduleOnce(function(){
                var goGameLabel = cc.LabelTTF.create("画面をタップして下さい!","Arial",20);
                goGameLabel.setPosition(cc.p(size.width/2,size.height/2 - 80));
                self.addChild(goGameLabel);
				//タッチイベント
                var touch = cc.EventListener.create({
                    event: cc.EventListener.TOUCH_ALL_AT_ONCE,
                    swallowTouches: true,                
                    //タッチ終了
                    onTouchesEnded:function (touches, event) {
                        cc.director.pushScene(new HomeScene());                    
                        //追加済みのイベントを削除
                        cc.eventManager.removeAllListeners();
                    }
                });
                cc.eventManager.addListener(touch,self);                
            },2.0);
            return true;
        }
    });
    //画面定義の返却
    return cc.Scene.extend({
        onEnter:function () {
            this._super();
            var layer = new Layer();
            layer.init();
            this.addChild(layer);
        }
    });
})();

この状態で確認してみましょう!

ゲーム終了

このページを読んだ人にオススメのブログ記事です！

cocos2d-html5で遊んでみた cocos2d-html5の3.0αを覗いてみた cocos2d-html5を覗いてみよう cocos2d-html5あらためcocos2d-JSをiOSシュミレーターで動かす為に 小ネタ cocos2d-JSのビルド時間を短縮する! cocos2d-JS 3.0でパーティクルを実装する cocos2d-JS 3.0でアプリを作った話 【ゲームを作ろう】衝突を検知して当たり判定を考える1

About The Author

FROGEGG

Add a Comment

メールアドレスが公開されることはありません。