はじめに
こちらの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) {
- :
- }
}
起動結果
削除後にビルド＆デバッグ起動して動作を検証します。
ちゃんと表示されたようです。
おしまい＆続く
今後はこちらでプロジェクトを公開します。
https://github.com/liberapp-inc/h5g-qiita-jump-and-run
また今回の記事に該当するのはこちらです
https://github.com/liberapp-inc/h5g-qiita-jump-and-run/tree/0d753af79468e035205871e3020db146f20a586e
毎日15分づつ書いています。今日はここまでしか進みませんでしたが、次回は地面の表示とカメラの移動までは実現したいです。