【Egret Engine】新規プロジェクトの作成とエディタの使い方

投稿者: | 2018年12月19日

フィア
Egret Engine 専用のエディタ、

「Egret Wing」の使い方を説明するよ

カレン
VSCodeに近いエディタだから、

意外と使いやすいと思うわ

 

スポンサーリンク

 

 

目次

 

 

準備

Egret Engine のインストールの記事を終えて、

以下のプログラムがインストールされているものとします。

 

 

新規 Project の作成

上部にある「Project」タブをクリックし、

New Project をクリック。

 

Project Nameに任意の名前を入力。

Stage Sizeに使用したい画面サイズを入力(横×縦 px)。

Scallはデバイスの画面サイズによって画面サイズを変更させるかどうか。showAllで常に同じアスペクト比で全画面表示させられます。

Createをクリックして完了。

 

 

Egret Engine は「Egret Wing」というエディタを使用します。

新規Project作成時は自動で開かれます。

 

Egret Wing の使い方

1、主要ツールの紹介

エディタで主に使用するのは以下の画像の赤字部分です。

 

 

2、ゲーム実行画面の表示方法

では、デフォルトのゲーム画面を表示してみます。

Src/Main.tsをクリックして開いてください。

主にこのMain.tsにコーディングしていきます。

 

Main.tsをアクティブにした状態で、

左上のデバッグをクリックしてください。

 

実行結果が表示されます。

 

 

コンソールを開くにはF6か工具タブより実行してください。

 

F5で更新のようですが、スクリプトの変更は更新しても反映されなかったので、

毎回画面を閉じて更新してください。

 

ブラウザから開きたい場合は、

下の行のデバッグをクリックし、

Launch Chromeに変更してください。

 

これで、左の緑の▶ボタンか、

上段のデバックボタンをクリックすると、

Choromeのブラウザで起動できます。

コンソールを開くときはF12を押してください。

 

 

画面サイズの変更

プロジェクトの作成時に画面サイズを指定しましたが、

「index.html」より変更することができます。

 

おわりに

フィア
次回はHello Worldを表示していくよー
カレン
テキストが表示できたら何とかなりそうね

 

HTML5 Egret Engine入門へ戻る

 

【Egret Engine】新規プロジェクトの作成とエディタの使い方」への2件のフィードバック

  1. ピンバック: 【Egret Engine】Hello World を表示する方法「TextField()」 | すくまりゲームズ

  2. ピンバック: 【Egret Engine】TypeScript の基礎(変数・メソッド・クラス・継承の使い方) | すくまりゲームズ

コメントを残す

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

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