Edited at

【連載】ジャンプ&ランゲームを作ろう(2) プロジェクトのクリーンアップ


はじめに

こちらのQiitaは勝手連載「ジャンプ&ランゲームを作ろう」になります。

前回の記事はこちらです。

【連載】ジャンプ&ランゲームを作ろう(1) プロジェクト作成


今日のゴール

主人公のボールです。ボールは一定速度で画面に右に転がります。

カメラは水平方向にボールに追従します。常にボールは水平中央に表示されます。

地面が無限に続きます。地面は移動しないため、カメラの移動とともに、常に画面左にスクロールします。

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


クリーンアップ

デフォルトのプロジェクトは無駄なリソースがありますので削除します。

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


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

.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) {
- :
- }

}



起動結果

削除後にビルド&デバッグ起動して動作を検証します。

ちゃんと表示されたようです。

image.png


おしまい&続く

今後はこちらでプロジェクトを公開します。

https://github.com/liberapp-inc/h5g-qiita-jump-and-run

また今回の記事に該当するのはこちらです

https://github.com/liberapp-inc/h5g-qiita-jump-and-run/tree/0d753af79468e035205871e3020db146f20a586e

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