前回の「初めてのenchant.js 004画像の表示[JavaScript]」では、シーン上に画像を表示しました。
今回はそのシーンの土台の上に文字を表示させて見たいと思います。
HTMLの方は特に変更なしです。
[index.html]
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>enchant.js example 005</title> <script type="text/javascript" src="js/enchant.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <div id="enchant-stage"></div> <h1>enchant.js example 005</h1> </body> </html>
次にmain.jsのmain()メソッド内に文字を追加するプログラムを追加します。
文字の追加はLabelクラスを使います。
また前回はbearのプロパティーの指定が多かったので、今回はだいぶ減らしています。
[main.js]
enchant(); window.onload = initGame; var game; var scene; var bear; var score; function initGame(){ game = new Game(320,320); game.preload('images/chara0.gif', 'images/chara1.gif'); game.onload = main; game.start(); } function main(){ game.scale = 1; scene = new Scene(); scene.backgroundColor = "#000"; game.pushScene(scene); bear = new Sprite(32,32); bear.image = game.assets['images/chara1.gif']; bear.x = 100; bear.y = 100; scene.addChild(bear); score = new Label("0123456"); score.color = "#FC9"; score.font = "normal normal 15px/1.0 monospace"; score.text = "00990"; scene.addChild(score); }
コード解説
var score;
ラベルオブジェクト(点数)格納用の変数です。
score = new Label("0123456");
Labelオブジェクトを生成、格納しています。(文字の表示にはLabelオブジェクトを使います。)
“0123456”の引数は文字の初期値です。
score.color = "#FC9";
文字の色を指定しています。CSS同様の指定が可能です。
bscore.font = "normal normal 15px/1.0 monospace";
CSSのフォントプロパティー同様に指定できます。上は、
フォントウエイト 、 フォントスタイル 、 フォントサイズ 、 行間 、 フォントの種類
と指定しています。
score.text = "00990";
ラベル(文字)の内容を書き換えます。
scene.addChild(score); //scene.removeChild(score);
シーンへ文字(Label)を追加しています。
コメントアウトにしていますが、「scene.removeChild(score);」とすると、
画面から消すことができます。
次回は「初めてのenchant.js 006音を鳴らす[JavaScript]」です。
初めてのenchant.js 一覧
- 初めてのenchant.js 001 基本的なこと[JavaScript]
- 初めてのenchant.js 002 基本セッティング[JavaScript]
- 初めてのenchant.js 003シーンの表示[JavaScript]
- 初めてのenchant.js 004画像の表示[JavaScript]
- 初めてのenchant.js 005文字の表示[JavaScript]
- 初めてのenchant.js 006音を鳴らす[JavaScript]
- 初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]
- 初めてのenchant.js 008イベント(基本編)[JavaScript]
- 初めてのenchant.js 009イベント(touchその1)[JavaScript]
- 初めてのenchant.js 010イベント(touchその2)[JavaScript]
- 初めてのenchant.js 011イベント(ENTER_FRAME)[JavaScript]
- 初めてのenchant.js 012イベント(キーボード)[JavaScript]
- 初めてのenchant.js 013当たり判定[JavaScript]
- 初めてのenchant.js 014オブジェクトの拡張[JavaScript]
- 初めてのenchant.js 015簡単なミニゲーム作成[JavaScript]
こちらもオススメ(別サイト)
enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。
ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。
コメントを残す