【Egret Engine】テキストを表示する方法「eui.Label()」

投稿者: | 2018年12月22日

フィア
今回はHello World を表示させてみるよ!
カレン
まだまだ分からないことが多いけど頑張ります!

 

目次

 

スポンサーリンク

 

準備

1、新規Projectの作成

【Egret Wing】新規Projectの作成とエディタの使い方を参考にして、新規Projectを作成してください。

私は「TestProject」という名前で作成しました。

 

2、不要ファイルの削除

【Egret Engine】TypeScript の基礎を参考にして、asset等の不要ファイルやコードを削除してください。

 

テキストを表示する方法

Main.ts

 

テキストやボタンなどのUI(ユーザーインターフェース)は常に前面に表示する必要があります。なので、図形などを表示するレイヤーとUI用のレイヤーは分けた方がいいと思います。

今回はUIレイヤーのみ生成していきます。

 

1、UILayerの生成

Game.mainStage = Main.stageです。このmainStageにUI用のレイヤーを乗せます。

 

2、UILayerCompornentクラスの生成

UILayerへテキストやボタンを表示させる場合はこのUILayerCompornentを継承してください。

これを継承すると、自動的にUILayerへ挿入されます。

 

3、テキストの表示

UILayerCompornentを継承し、eui.Label型のテキストをインスタンス化してください。

 

テキストの拡大や移動は、

で行えます。その他にも色々ありますので詳しくは公式APIを参照してください。

 

おわりに

フィア
Unityに慣れてると、

テキストの表示だけでも長く見えちゃうね

カレン
Unityの偉大さがわかる…

 

 

参考URL

公式 EgretEngine API

public class UILayer

public class Label

 

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

 

原色大辞典

https://www.colordic.org/

 

 

HTML5 Egret Engine 入門へ戻る