はじめに
この記事では「eui.Label」を使用して「Hello World」を表示させます。
準備
１、新規Projectの作成
【Egret Wing】新規Projectの作成とエディタの使い方を参考にして、新規Projectを作成してください。
私は「TestProject」という名前で作成しました。
２、不要ファイルの削除
【Egret Engine】TypeScript の基礎を参考にして、asset等の不要ファイルやコードを削除してください。
テキストを表示する方法
Main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
class Main extends eui.UILayer { public constructor() { super(); this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this); } private addToStage() { Game.init(this.stage); egret.startTick(this.tickLoop, this); } tickLoop(timeStamp:number):boolean{ return false; } } class Game{ static I : Game; static mainStage: egret.Stage; static height: number; static width: number; static init(stage:egret.Stage) { Game.I = this; Game.height = egret.MainContext.instance.stage.stageHeight; Game.width = egret.MainContext.instance.stage.stageWidth; Game.mainStage = stage; /* メソッドなどを記入*/ new UILayer(); new Hello(); } } class UILayer{ static display: eui.UILayer = null; constructor(){ this.initial(); } initial(){ UILayer.display = new eui.UILayer(); Game.mainStage.addChild(UILayer.display); } } class UICompornent extends egret.DisplayObjectContainer{ display: egret.DisplayObjectContainer = null; static compornents: UICompornent[] = []; constructor(){ super(); this.initial(); } initial(){ this.display = new egret.DisplayObjectContainer(); UILayer.display.addChild(this.display); UICompornent.compornents.push(this); } } class Hello extends UICompornent{ constructor(){ super(); this.method(); } method(){ let hello:eui.Label = new eui.Label(); hello.text = "Hello World"; this.display.addChild(hello); } } |
テキストやボタンなどのUI（ユーザーインターフェース）は常に前面に表示する必要があります。なので、図形などを表示するレイヤーとUI用のレイヤーは分けた方がいいと思います。
今回はUIレイヤーのみ生成していきます。
１、UILayerの生成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class UILayer extends eui.UILayer{ static display: eui.UILayer = null; constructor(){ super(); this.initial(); } initial(){ UILayer.display = new eui.UILayer(); Game.mainStage.addChild(UILayer.display); } } |
Game.mainStage = Main.stageです。このmainStageにUI用のレイヤーを乗せます。
２、UILayerCompornentクラスの生成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class UICompornent extends egret.DisplayObjectContainer{ display: egret.DisplayObjectContainer = null; static compornents: UICompornent[] = []; constructor(){ super(); this.initial(); } initial(){ this.display = new egret.DisplayObjectContainer(); UILayer.display.addChild(this.display); UICompornent.compornents.push(this); } } |
UILayerへテキストやボタンを表示させる場合はこのUILayerCompornentを継承してください。
これを継承すると、自動的にUILayerへ挿入されます。
３、テキストの表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class Hello extends UICompornent{ constructor(){ super(); this.method(); } method(){ let hello:eui.Label = new eui.Label(); hello.text = "Hello World"; this.display.addChild(hello); } } |
UILayerCompornentを継承し、eui.Label型のテキストをインスタンス化してください。
テキストの拡大や移動は、
|
1 2 3 4 5 6 7 8 9 |
//textの移動 hello.x = 300; hello.y = 100; //サイズ変更 hello.size = 50; //色の変更 hello.textColor = 0xff0000; |
で行えます。その他にも色々ありますので詳しくは公式APIを参照してください。
参考URL
公式 EgretEngine API
EDN Egret Developer Network
http://edn.egret.com/cn/article/index/id/639
Egret Developer 例
http://developer.egret.com/cn/example/page/index#110-text-color
原色大辞典
