はじめに

こちらのQiitaは勝手連載「ジャンプ＆ランゲームを作ろう」になります。
前回の記事はこちらです。
【連載】ジャンプ＆ランゲームを作ろう(1) プロジェクト作成

今日のゴール

主人公のボールです。ボールは一定速度で画面に右に転がります。
カメラは水平方向にボールに追従します。常にボールは水平中央に表示されます。
地面が無限に続きます。地面は移動しないため、カメラの移動とともに、常に画面左にスクロールします。

今回は、ボールはジャンプしません。地面は赤と白の二種類の地面だけが無限に続きます。

クリーンアップ

デフォルトのプロジェクトは無駄なリソースがありますので削除します。
特にHTML5ゲームにとって無駄なリソースは毎回起動時のロードが長くユーザ体験を損ねますのでちゃんとクリーンアップしましょう。

まず gitのの管理対象化とする

.gitignoreを作成する

.gitignore

bin-debug/
.idea/
temp/
libs/
egret.d.ts

リポジトリを作成して前回の記事に相当するコードをコミットしプッシュします。

git init
git add --all
git commit -m "Article #1"
git remote add origin https://XXXX:YYYY@github.com/liberapp-inc/h5g-qiita-jump-and-run.git
git push -u origin master

XXXX:YYYYはIDとパスワードのため伏せています

使わないリソースの削除

> git rm -rf resource/assets/*
> git rm resource/config/description.json
> git rm resource/eui_skins/*

default.res.json

{
	"groups": [
		{
-			"keys": "checkbox_select_disabled_png,checkbox_select_down_png,checkbox_select_up_png,checkbox_unselect_png,selected_png,border_png,header_png,radiobutton_select_disabled_png,radiobutton_select_down_png,radiobutton_select_up_png,radiobutton_unselect_png,roundthumb_png,thumb_png,track_png,tracklight_png,handle_png,off_png,on_png,button_down_png,button_up_png,thumb_pb_png,track_pb_png,track_sb_png,bg_jpg,egret_icon_png,description_json",
+						"keys": "",
			"name": "preload"
		}
	],
	"resources": [
-		{
-			"url": "assets/CheckBox/checkbox_select_disabled.png",
-			"type": "image",
-			"name": "checkbox_select_disabled_png"
-		},
-:
-		{
-			"name": "description_json",
-			"type": "json",
-			"url": "config/description.json"
-		}
	]
}

resource/default.thm.json

{
	"skins": {
- 		"eui.Button": "resource/eui_skins/ButtonSkin.exml",
- :
-		"eui.ItemRenderer": "resource/eui_skins/ItemRendererSkin.exml"
	},
	"autoGenerateExmlsList": true,
	"exmls": [
-		"resource/eui_skins/ButtonSkin.exml",
-  :
-		"resource/eui_skins/VSliderSkin.exml"
	],
	"path": "resource/default.thm.json"
}

ゴミソースコードの削除

Main.ts


class Main extends eui.UILayer {

    private async runGame() {
        await this.loadResource()
        this.createGameScene();
-       const result = await RES.getResAsync("description_json")
-       this.startAnimation(result);
-       await platform.login();
-       const userInfo = await platform.getUserInfo();
-       console.log(userInfo);
    }

-    private textfield: egret.TextField;

    protected createGameScene(): void {
+       const text = new egret.TextField();
+       text.textColor = 0xff0000;
+       text.text = "Hello!";
+       text.x = (this.width - text.width) / 2;
+       text.y = (this.height - text.height) / 2;
+       this.addChild(text);

-        let sky = this.createBitmapByName("bg_jpg");
-        this.addChild(sky);
-        let stageW = this.stage.stageWidth;
-        let stageH = this.stage.stageHeight;
-        sky.width = stageW;
-        sky.height = stageH;
- :
-      button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, this);
    }

- private createBitmapByName(name: string): egret.Bitmap {
-     :
- }

- private startAnimation(result: Array<any>): void {
-     :
- }

- private onButtonClick(e: egret.TouchEvent) {
-     :
- }

}

起動結果

削除後にビルド＆デバッグ起動して動作を検証します。
ちゃんと表示されたようです。

おしまい＆続く

今後はこちらでプロジェクトを公開します。
https://github.com/liberapp-inc/h5g-qiita-jump-and-run

また今回の記事に該当するのはこちらです
https://github.com/liberapp-inc/h5g-qiita-jump-and-run/tree/0d753af79468e035205871e3020db146f20a586e

毎日15分づつ書いています。今日はここまでしか進みませんでしたが、次回は地面の表示とカメラの移動までは実現したいです。