ラベル(文字)を表示してみよう
サンプル
コードの解説
変数UI_DATAに文字を描画するのに必要なデータを作っておきます。
/**
* TitleScene
*/
(function(ns) {
// ラベルのリスト
var UI_DATA = {
LABELS: {
children: [{
type: "Label",
name: "label",
x: 40,
y: 80,
width: ns.SCREEN_WIDTH,
fillStyle: "red",
text: "ここはTitleSceneです。",
fontSize: 30,
align: "left"
}]
}
};
ns.TitleScene = tm.createClass({
superClass : tm.app.TitleScene,
init : function() {
this.superInit({
title : "タッチゲーム制作チュートリアル",
width : ns.SCREEN_WIDTH,
height : ns.SCREEN_HEIGHT
});
// ラベル表示
this.fromJSON(UI_DATA.LABELS);
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.MainScene());
});
},
});
})(game);
文字の色や、フォントのサイズ、表示する場所など指定できますね。文字に関することを全てセッティングします。セッティングしたデータが出来れば、次の一行で画面に表示することができます。
// ラベル表示
this.fromJSON(UI_DATA.LABELS);
ついでなので、現在どのシーンなのか分かるように、全てのシーンにラベルを表示しておきましょう。
/**
* MainScene
*/
(function(ns) {
// ラベルのリスト
var UI_DATA = {
LABELS: {
children: [{
type: "Label",
name: "label",
x: 40,
y: 80,
width: ns.SCREEN_WIDTH,
fillStyle: "red",
text: "ここはMainSceneです。",
fontSize: 30,
align: "left"
}]
}
};
ns.MainScene = tm.createClass({
superClass : tm.app.Scene,
init : function() {
this.superInit();
// ラベル表示
this.fromJSON(UI_DATA.LABELS);
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.EndScene());
});
},
});
})(game);
/**
* EndScene
*/
(function(ns) {
// ラベルのリスト
var UI_DATA = {
LABELS: {
children: [{
type: "Label",
name: "label",
x: 40,
y: 80,
width: ns.SCREEN_WIDTH,
fillStyle: "red",
text: "ここはEndSceneです。",
fontSize: 30,
align: "left"
}]
}
};
var RESULT_PARAM = {
score: 256,
msg: "【タッチゲーム制作チュートリアル】",
hashtags: ["omatoro", "tmlibチュートリアル"],
url: "http://testcording.com",
width: ns.SCREEN_WIDTH,
height: ns.SCREEN_HEIGHT,
related: "tmlib.js Tutorial testcording",
};
ns.EndScene = tm.createClass({
superClass : tm.app.ResultScene,
init : function() {
// スコア
this.superInit(RESULT_PARAM);
// ラベル表示
this.fromJSON(UI_DATA.LABELS);
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.TitleScene());
});
},
});
})(game);
ボタンを表示してみよう
サンプル
コードの解説
EndSceneで使われているボタンを作ってみましょう。
/**
* MainScene
*/
(function(ns) {
// ラベルのリスト
var UI_DATA = {
LABELS: {
children: [{
type: "Label",
name: "label",
x: 40,
y: 80,
width: ns.SCREEN_WIDTH,
fillStyle: "red",
text: "ここはMainSceneです。",
fontSize: 30,
align: "left"
}]
}
};
var BUTTON_SIZE = 128;
var BUTTON_COLOR = "green";
var BUTTON_TEXT = "ボタンです";
var BUTTON_X = ns.SCREEN_WIDTH/2;
var BUTTON_Y = ns.SCREEN_HEIGHT/2;
ns.MainScene = tm.createClass({
superClass : tm.app.Scene,
init : function() {
this.superInit();
// ラベル表示
this.fromJSON(UI_DATA.LABELS);
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.EndScene());
});
// ボタンを作る
var button = tm.app.GlossyButton(BUTTON_SIZE, BUTTON_SIZE, BUTTON_COLOR, BUTTON_TEXT);
// 表示位置
button.position.set(BUTTON_X, BUTTON_Y);
// 表示する
this.addChild(button);
},
});
})(game);
GlossyButtonというクラスを使うと、シンプルで綺麗なボタンが簡単に作ることができます。しかもマウスを重ねたりタッチすると光ります。ボタンのサイズや色、中に書くテキストを指定することができます。
// ボタンを作る
var button = tm.app.GlossyButton(BUTTON_SIZE, BUTTON_SIZE, BUTTON_COLOR, BUTTON_TEXT);
次のposition.setで表示箇所を指定します。
// 表示位置
button.position.set(BUTTON_X, BUTTON_Y);
実際に表示するには、このシーンの子として追加する必要があります。addChild()に追加すると自動で描画してくれると思ったらOKです。
// 表示する
this.addChild(button);
ハートを表示してみよう
サンプル
コードの解説
/**
* MainScene
*/
(function(ns) {
// ラベルのリスト
var UI_DATA = {
LABELS: {
children: [{
type: "Label",
name: "label",
x: 40,
y: 80,
width: ns.SCREEN_WIDTH,
fillStyle: "red",
text: "ここはMainSceneです。",
fontSize: 30,
align: "left"
}]
}
};
var HEART_SIZE = 128;
var HEART_X = ns.SCREEN_WIDTH/2;
var HEART_Y = ns.SCREEN_HEIGHT/2;
ns.MainScene = tm.createClass({
superClass : tm.app.Scene,
init : function() {
this.superInit();
// ラベル表示
this.fromJSON(UI_DATA.LABELS);
// 画面(シーンの描画箇所)をタッチした時の動作
this.addEventListener("pointingend", function(e) {
// シーンの遷移
e.app.replaceScene(ns.EndScene());
});
// ハートを作る
var heart = tm.app.HeartShape(HEART_SIZE, HEART_SIZE);
// 表示位置
heart.position.set(HEART_X, HEART_Y);
// 表示する
this.addChild(heart);
},
});
})(game);
ボタンと同じ要領で、簡単にハートを書くことができます。このハートを使ってゲームを作っていってみましょう。
HeartShapeではなく、StarShapeやCircleShapeに名前を変えると星形や円形を簡単に表示できます。サンプルを載せておきますので、弄ってみてくださいね。
