
在宅さん
今回はManagerSceneを使って作ってみたいと思います。
ManagerScene
ManagerSceneは、名前の通りSceneを管理するクラスです。
今回は自作のManagerSceneを使って、Sceneを推移させます。
まず、デフォルトのManagerを作成します。
phina.define("DefaultManager", {
superClass: "ManagerScene",
init: function() {
this.superInit({
startLabel:'splash',
scenes:[
{
className: 'SplashScene',
label: 'splash',
nextLabel: 'title',
},
{
className: 'TitleScene',
label: 'title',
nextLabel: 'main',
},
{
className: 'MainScene',
label: 'main',
nextLabel: 'pause',
},
{
className: 'ResultScene',
label: 'result',
nextLabel: 'title',
},
]
});
},
});
次に、分岐させたいManagerを作成します。
今回はCountScene→PauseSceneの処理を持ったCountManagerを作成します。
phina.define("CountManager", {
superClass: "ManagerScene",
init: function() {
this.superInit({
startLabel:'count',
scenes: [
{
className: 'CountScene',
label: 'count',
nextLabel: 'pause',
},
{
className: 'PauseScene',
label: 'pause',
},
]
});
},
onfinish:function(){
this.exit();
}
});
今回はボタンによってに推移させます。
.onpush=function(){
main_scene.app.replaceScene(CountManager());
};
以下が全コードになります。
// phina.js をグローバル領域に展開
phina.globalize();
phina.define("DefaultManager", {
superClass: "ManagerScene",
init: function() {
this.superInit({
scenes:[
{
className: 'SplashScene',
label: 'splash',
nextLabel: 'title',
},
{
className: 'TitleScene',
label: 'title',
nextLabel: 'main',
},
{
className: 'MainScene',
label: 'main',
nextLabel: 'pause',
},
{
className: 'ResultScene',
label: 'result',
nextLabel: 'title',
},
]
});
},
});
phina.define("CountManager", {
superClass: "ManagerScene",
init: function() {
this.superInit({
startLabel:'count',
scenes: [
{
className: 'CountScene',
label: 'count',
nextLabel: 'pause',
},
{
className: 'PauseScene',
label: 'pause',
},
]
});
},
onfinish:function(){
this.exit();
}
});
phina.define('MainScene', {
superClass: 'CanvasScene',
init: function() {
this.superInit();
this.backgroundColor = '#444';
this.label = Label('どちらか押してね').addChildTo(this);
this.label.x = this.gridX.center();
this.label.y = this.gridY.center();
this.label.fill = 'white';
var main_scene=this;
var button_count = Button({
x: main_scene.gridX.center(-4),
y: main_scene.gridY.span(12),
width: 150,
height: 100,
text: "カウントダウン",
fontSize: 18,
fontColor: 'black',
}).addChildTo(this)
.onpush=function(){
main_scene.app.replaceScene(CountManager());
};
var button_finish = Button({
x: main_scene.gridX.center(4),
y: main_scene.gridY.span(12),
width: 150,
height: 100,
text: "終わり",
fontSize: 23,
fontColor: 'black',
}).addChildTo(this)
.onpush=function(){
main_scene.exit();
};
},
});
phina.main(function() {
// アプリケーション生成
var app = GameApp({
startLabel:'splash',
scene:DefaultManager(),
});
// アプリケーション実行
app.run();
});
結果とまとめ
今回はMainSceneにボタンを配置し、クリックするボタンによって推移するSceneが変わりました。

①CountScene ②PauseScene ③ResultScene
