Herlockで作るiOSアプリ(もちろんAndroidも!) – Sceneライブラリ編 –

準備が整ったのでライブラリを覗いてみたいと思います。
ヘルプがないので使い方間違っている箇所も多いと思いますが、自分なりに解析してみました。

ライブラリの準備

アプリ開発ではシーン管理は必須なのでSceneライブラリを利用してみます。
requirejsに依存しているのでrequirejsも合わせて読み込みます。
また、非同期処理のコントロールも行うのでJSDeferredもチェックしましょう。

正常に読み込まれた場合は以下のようになっています。

• lib/JSDeferred/jsdefferd.min.js
• lib/Scene/scene.js
• lib/requirejs/require.min.js

コードの記述

ではコードを書いていきましょう。

Requirejsの設定

main.jsへモジュール化されたソースコードの依存関係などを設定します。

(function(){
    "use strict";
    var loader = new Script( "lib/requirejs/require.min.js" );
    loader.onload = function() {
		require.config( {
            baseUrl: "app/",
            paths: {
                'config' : 'config',
                'SceneManager' : '../lib/Scene/scene'
            },
			shim: {
                '../lib/JSDeferred/jsdeferred': {
                    exports: 'Deferred'
                },
                'config' : {
                    deps : ['SceneManager','../lib/JSDeferred/jsdeferred']
                },
                'start' : {
                    deps : ['scene/top']
                },
                'scene/top' : {
                    deps : ['scene/game']
                }
             }
        });
        require(["start"]);
    }
})();

設定ファイルは、Herlockで作るiOSアプリ(もちろんAndroidも!) – 開発環境整備編 –で準備したものと同じです。

/* 基本設定 */
define(function(){
    var height = (window.outerHeight<=960) ? 960 : 1136;
    return {
        height : height,
        background : {
            top : "assets/images/bg_top_" + height + ".png",
            game : "assets/images/bg_game_" + height + ".png"
        },
        button : "assets/images/button_"
    }
});

Scene管理ライブラリを使う

今回の目的でもあるScene管理を行うライブラリを利用してみます。
Herlockで作るiOSアプリ(もちろんAndroidも!) – 開発環境整備編 –で作成したtop.jsとgame.jsの内容を修正していきます。

基本的な設定は下記の通りです。

• 1.onPrepareに準備処理を記述
• 2.onEnterに読込み処理を記述
• 3.onShowに表示処理を記述
• 4.onHideに非表示処理を記述

初回は1〜3までcallが行われ、再読込時は3がcallされます。
非表示の時は4がcallされます。
stageは共通なのでwindowのプロパティへ設定しています。
＊stage管理用のモジュールを準備しても良いと思いましたが、処理の割に冗長的になるのでwindowに保持しました。

/* 画面遷移の管理 */
define( ['config'], function ( config ) {
    //画面オブジェクト
    var _sprite_image_bg, _sprite_button;
    var _loaded = false;
    window._stage = null;
    //topページの追加
    var Page = function (path){
        //親のコンストラクタを呼び出す
        Scene.call(this,path);
        //ゲーム画面へ遷移する
        this.goToGame = function(){
            //ゲーム画面の描画
            Scene.goto("/game");
        }
        //画面オブジェクトの追加
        this.addChildren = function(){
            //背景画像の描画
            _stage.addChild( _sprite_image_bg );
            //ボタンの描画
            _stage.addChild( _sprite_button );
            _sprite_button.addEventListener( "touchTap",this.goToGame, false );
        }
    };
    Page.prototype = new Scene();
    var deferred = Deferred();
    //読込処理
    Page.prototype.onEnter = function () {
        //ステージの準備
        _stage = addLayer( new Stage( 640, config.height ) ).content;
        //コンテキスト
        var self = this;
        //ボタンの準備
        var image_button = new Image( config.button + "start.png" );
        image_button.onload = function () {
            _sprite_button = new Sprite( 170, 90 );
            _sprite_button.x = 117;
            _sprite_button.y = 500;
            _sprite_button.addChild( new Bitmap( new BitmapData( image_button ) ) );
            //背景画像の描画
            var image_bg = new Image( config.background.top );
            image_bg.onload = function () {
                //背景画像の準備
                _sprite_image_bg = new Bitmap( new BitmapData( image_bg ) );
                //onShowの呼び出し
                deferred.call();
                _loaded = true;
            };
        }
    };
    //表示処理
    Page.prototype.onShow = function () {
        //コンテキスト
        var self = this;
        if(!_loaded){
            deferred.next( function () {
                //背景画像の描画
                self.addChildren();
            });
        }else{
            this.addChildren();
        }
    };
    //非表示処理
    Page.prototype.onHide = function () {
        _sprite_button.removeEventListener( "touchTap", this.goToGame );
        _stage.removeChild(_sprite_button);
        _stage.removeChild(_sprite_image_bg);
    };
    //シーンの追加
    Scene.mapping( {
        "/" : Page
    } );
} );

 

/* 画面遷移の管理 */
define( ['config'], function ( config) {
    //画面オブジェクト
    var _sprite_image_bg, _sprite_button;
    var _loaded = false;
    //Gameページの追加
    var Page = function (path){
        Scene.call(this,path);
        this.stage = Scene.stage;
        //Topイベント
        this.goToTop = function(){
            //ゲーム画面の描画
            Scene.goto("/");
        }
        //画面オブジェクトの追加
        this.addChildren = function(){
            //背景画像の描画
            _stage.addChild( _sprite_image_bg );
            //ボタンの描画
            _stage.addChild( _sprite_button );
            _sprite_button.addEventListener( "touchTap",this.goToTop, false );
        }
    };
    Page.prototype = new Scene();
    var deferred = Deferred();
    //読込処理
    Page.prototype.onEnter = function () {
        //ボタンの準備
        var image_button = new Image(config.button + "top.png");
        image_button.onload = function() {
            _sprite_button = new Sprite(170,90);
            _sprite_button.x = 117;
            _sprite_button.y = 500;
            _sprite_button.addChild( new Bitmap( new BitmapData( image_button ) ) );
            //背景画像の描画
            var image_bg = new Image(config.background.game);
            image_bg.onload = function(){
                //背景画像の準備
                _sprite_image_bg = new Bitmap( new BitmapData( image_bg ) );
                //onShowの呼び出し
                deferred.call();
                _loaded = true;
            };
        }
    };
    //表示処理
    Page.prototype.onShow = function () {
        //コンテキスト
        var self = this;
        if(!_loaded){
            deferred.next( function () {
                //背景画像の描画
                self.addChildren();
            });
        }else{
            this.addChildren();
        }
    };
    //非表示処理
    Page.prototype.onHide = function () {
        _sprite_button.removeEventListener( "touchTap", this.goToTop );
        _stage.removeChild(_sprite_button);
        _stage.removeChild(_sprite_image_bg);
    };
    //シーンの追加
    Scene.mapping({
        "/game": Page
    });
});

TOP表示呼び出し記述

start.jsがアプリケーション起動時に呼び出されるモジュールです。
さっそくtop画面を表示するコードを記述してみましょう。

/* アプリケーションの開始 */
define(['SceneManager'],function(Scene){
    //トップ画面へ遷移する
	Scene.goto("/");
});

デバッグアプリで確認

記述が完了したらデバッグアプリで確認してみましょう！
デバッグについてはHerlockで作るiOSアプリ(もちろんAndroidも!) – デバッグ編 –を参照して下さい。

動きを与えるにはTweenJSを利用するほうが良さそうですね。
時間があったら試しみたいと思います。