デモ

Egret Developer Centerから配信されているこちらのソシャゲ風デモのタブ右端の「关于」ボタンを押したときに出てくる
http://developer.egret.com/cn/article/index/id/833

こちらの画面のようなポップアップを実装したい

やること

レイアウトの定義ファイルを作成する

resource/custom_skinsディレクトリを作成する
メニューからNew From Template→New Exml Componentを選択する
できたファイルのうちGameOverScene.tsをsrcへ移動、GameOverScene.exmlをresource/custom_skinsへ移動

レイアウト定義

GameOverScene.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="GameOverSceneSkin" width="400" height="300" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
    <w:Config id="1670ba1839b" ></w:Config>
</e:Skin>

ここのwidthとheightを下記のindex.htmlにあわせて

index.html

<body>
    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
         :
         data-content-width="640"
         data-content-height="1136"

こちらにする

... <e:Skin class="GameOverSceneSkin" width="640" height="1136" ...

Previewしてみるとこうなります

背景を作成する

ポップアップの背面に透明度50%の黒い板を置きます

画面左端のコンポーネント一覧からRectをドラッグ＆ドロップして
画面右のProperty Panelから、x/y座標とwidth/heightを設定して、FillのAlphaを0.5にします

あとはポップアップのウインドウの面(Rect)と、ゲームオーバーのタイトルとスコアを表示するLabelを配置して調整します。

スコアを表示するLabelは、PropertyPanelのIDフィールドに名前をつけてください。
今回はlastScoreLabelとしました。

ポップアップ画面の実装

自動で生成されたGameOverScene.tsクラスを以下のように書き換えます

コンストラクターのthis.skinName = "resource/custom_skins/GameOverScene.exml";で、読み込みたい定義済みのレイアウトを指定します。
レイアウトで定義したコンポーネントをプログラムで使いたい場合は、レイアウト定義ファイル上でIDを指定します。そのIDと同じコンポーネントをクラスのプロパティーとして実装してください。
今回の場合は、private lastScoreLabel: eui.Label;で定義されたプロパティーに、先ほどのレイアウト定義で、IDをLastScoreLabelに設定したLabelコンポーネントが自動でBindされます。

GameOverScene.ts

class GameOverScene extends eui.Component implements  eui.UIComponent {
    private lastScoreLabel: eui.Label;
    private lastScore: number;

    public constructor(lastScore: number) {
        super();
        this.lastScore = lastScore;
        this.addEventListener( eui.UIEvent.COMPLETE, this.uiCompHandler, this );
        this.skinName = "resource/custom_skins/GameOverScene.exml";     
    }

    private uiCompHandler():void {
        this.lastScoreLabel.text = `${this.lastScore}`;

        this.addEventListener( egret.TouchEvent.TOUCH_TAP, ( evt:egret.TouchEvent )=>{
            this.parent.addChild(new TitleScene());
            this.parent.removeChild(this);            
        }, this );
    }

}

ポップアップ画面の呼び出し

GameScene.ts

class GameScene extends egret.Sprite {
:
            this.parent.addChild(new GameOverScene(scoreUi.lastScore));
            this.parent.removeChild(this);      
:

EgretEngineでポップアップを出したい

デモ