【Egret Engine】Hello World を表示する方法「eui.Label()」

投稿者: | 2018年12月22日

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

 

スポンサーリンク

 

目次

 

 

はじめに(追記)

eui.UILayerはegret.DisplayObjectContainerを継承しています

公式のコードでは egret.DisplayObjectContainer を使っているものも多いですが、最新のeui.UILayerの使用をおすすめします。

詳しい使い分けは以下の記事に記してあるので、よかったらご覧ください。

【Egret Engine】eui.UILayer と egret.DisplayObjectContainer の使い分け

 

・eui.UILayerを使用する場合

 

・egret.DisplayObjectContainer を使用する場合

 

 

準備

1、新規Projectの作成

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

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

 

2、Main.ts内のコードを初期化

Egret Wing エディタに表示されているTestProject/src/Main.ts をクリック。(表示されてない場合はツールのエクスプローラーをクリック)。

 

Main.ts内のコードを全て削除して、以下のクラスを加えてください。

 

デバッグボタンを押して実行すると、何も表示されていないウィンドウが表示されます。

 

 

で「eui.UILayer」を継承しています。

これは、図形やテキストなどのUI(ユーザーインターフェース)関連のクラスです。

 

で「addToStage」に記載されたコードを元に、オブジェクトを表示します。

 

なので、これから「addToStage」にコードを追加していきます。

 

スポンサーリンク

 

 

テキストを表示する方法

Egret Engine はTypeScriptを使用します。

 

でインスタンス化し、

で表示します。

 

テキストの移動や拡大、および色変更

 

EgretEngineでは左上が (x, y ) = (0, 0)です。

 

色を変更する際の注意点があります。

通常、赤色のコードは「#ff0000」ですが、EgretEngineでは#の代わりに「0x」を付けて、「0xff0000」と記載してください。

 

その他テキスト関連のAPIは以下のリンクをご覧ください。

公式 API public class TextField

 

色コードはこちらからご覧ください

原色大辞典

 

 

おわりに

フィア
Unityに慣れてると、

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

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

 

 

参考URL

公式 EgretEngine API

public class UILayer

public class Label

public class DisplayObjectContainer

public class TextField

 

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 入門へ戻る

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください