03:「ボタンや文字など色々表示してみよう」 – JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを超簡単に作るチュートリアル
はてなブックマーク - 03:「ボタンや文字など色々表示してみよう」 – JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを超簡単に作るチュートリアル
Pocket

ラベル(文字)を表示してみよう

サンプル

コードの解説

変数UI_DATAに文字を描画するのに必要なデータを作っておきます。

文字の色や、フォントのサイズ、表示する場所など指定できますね。文字に関することを全てセッティングします。セッティングしたデータが出来れば、次の一行で画面に表示することができます。

ついでなので、現在どのシーンなのか分かるように、全てのシーンにラベルを表示しておきましょう。

ボタンを表示してみよう

サンプル

コードの解説

EndSceneで使われているボタンを作ってみましょう。

GlossyButtonというクラスを使うと、シンプルで綺麗なボタンが簡単に作ることができます。しかもマウスを重ねたりタッチすると光ります。ボタンのサイズや色、中に書くテキストを指定することができます。

次のposition.setで表示箇所を指定します。

実際に表示するには、このシーンの子として追加する必要があります。addChild()に追加すると自動で描画してくれると思ったらOKです。

ハートを表示してみよう

サンプル

コードの解説

ボタンと同じ要領で、簡単にハートを書くことができます。このハートを使ってゲームを作っていってみましょう。

 
 

HeartShapeではなく、StarShapeやCircleShapeに名前を変えると星形や円形を簡単に表示できます。サンプルを載せておきますので、弄ってみてくださいね。