はじめに
H5ゲームはUnityと比べてコーディングが難しいです。そこで、よく使う機能をまとめたEgret Engineのテンプレートを作成しました。
GitHubにも挙げておきますので、よかったら使ってください。
Egret Template
GitHub - squmari/EgretTemplate: A template of Egret Engine
A template of Egret Engine. Contribute to squmari/EgretTemplate development by creating an account on GitHub.
github.com
https://github.com/squmari/EgretTemplate
Egret EngineをできるだけUnityのように使えるコード作成しました。
以下のコードを参照しているので、こちらもごらんください。
参照したコード
Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over...
github.com
準備
１、srcフォルダのMain以外を削除する。
新規プロジェクトを生成すると、いろんなスクリプトが入っていると思います。
Main以外は使わなくても大丈夫ですので消しましょう。
２、Resource/Assetフォルダ内にある画像を削除する。
Button等の画像が入っていますが、デフォルトで使うことはほとんどないと思います。200KB近くあるので消してしまいましょう。
Resource/eui_skinフォルダも同様です。
簡単に使えるUnityライクなテンプレートの作成
Main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
class Main extends eui.UILayer { public constructor() { super(); this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this); } private addToStage() { GameObject.initial( this.stage ); Util.init(this); Game.init(); egret.startTick(this.tickLoop, this); } tickLoop(timeStamp:number):boolean{ GameObject.update(); return false; } } class Game{ public static height: number; public static width: number; static init() { this.height = egret.MainContext.instance.stage.stageHeight; this.width = egret.MainContext.instance.stage.stageWidth; /* new メソッドを記入*/ new Background(); new Score(); } } class Background extends GameObject{ constructor() { super(); this.shape = new egret.Shape(); this.shape.graphics.beginFill(Util.color(255,255,255)); this.shape.graphics.drawRect(0, 0, Game.width, Game.height); this.shape.graphics.endFill(); GameObject.display.addChild(this.shape); } updateContent() {} } class CreateWorld extends PhysicsObject{ static I : CreateWorld = null; constructor() { super(); CreateWorld.I = this; CreateWorld.world.on("beginContact", this.collision, this); } createWorld(){ CreateWorld.world = new p2.World(); CreateWorld.world.sleepMode = p2.World.BODY_SLEEPING; CreateWorld.world.gravity = [0, 9.8]; } static worldBegin(dt : number) :boolean{ CreateWorld.world.step(1/60, dt/1000, 10); return false; } //コリジョンイベントはここにまとめる private collision(evt : any){ } addDestroyMethod(){CreateWorld.world.clear();} updateContent(){} } |
Util.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// ゲームで便利に使えるUtilityクラス class Util{ public static height: number; public static width: number; public static ui:eui.UILayer; static init( eui:eui.UILayer ) { this.height = eui.stage.stageHeight; this.width = eui.stage.stageWidth; this.ui = eui; } static random(min:number, max:number):number { return min + Math.random() * (max - min); } static randomInt(min:number, max:number):number { return Math.floor( min + Math.random() * (max+0.999 - min) ); } static clamp(value:number, min:number, max:number):number { if( value < min ) value = min; if( value > max ) value = max; return value; } //rgbを16進数へ変換 static color( r:number, g:number, b:number):number { //小数点の切り捨て let r16 = r.toFixed(0); let g16 = g.toFixed(0); let b16 = b.toFixed(0); //16進数へ変換 r16 = r.toString(16); g16 = g.toString(16); b16 = b.toString(16); //r = 0だと r16 =0なので00にするために'00'加算 r16 = ('00' + r16).slice(-2); g16 = ('00' + g16).slice(-2); b16 = ('00' + b16).slice(-2); //色コードへ変換 let code :number = parseInt(("0x" +r16 + g16 + b16), 16) ; return code; } static myText(x:number, y:number, text:string, size:number, ratio:number, color:number, bold:boolean): egret.TextField { let tf :egret.TextField = new egret.TextField(); tf.x = x; tf.y = y; tf.text = text; tf.bold = bold; tf.size = size; tf.scaleX = ratio; tf.scaleY = ratio; tf.textColor = color; return tf; } static myStrokeText(x:number, y:number, text:string, size:number, ratio:number, color:number, font:string, stColor:number, stSize:number): egret.TextField { let tf :egret.TextField = new egret.TextField(); tf.x = x; tf.y = y; tf.scaleX = ratio; tf.scaleY = ratio; tf.textFlow = <Array<egret.ITextElement>>[ {text: text, style: { "textColor": color, "size": size, "fontFamily": font, "strokeColor": stColor, "stroke": stSize, } } ]; return tf; } } |
GameObject.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
// UnityのGameObjectライクなタスク管理クラス // update()に毎フレームの処理を書く // オブジェクトを破棄するときはdestroy()を呼ぶ // 破棄のときに後処理が必要なら、addDestroyMethod()に記述 // 生成時の初期化はUnityと違い、constructor()を使う（引数を渡せる） // シーンを切り替えたい場合は transitにシーンロード関数を設定（全オブジェクトを破棄してからtransitを実行） abstract class GameObject { public shape:egret.Shape = null; public static objects: GameObject[] = []; public static display: egret.DisplayObjectContainer; public static transit:()=>void; protected destroyFlag : boolean = false; constructor() { GameObject.objects.push(this); } static initial(displayObjectContainer: egret.DisplayObjectContainer){ GameObject.objects = []; GameObject.display = displayObjectContainer; } abstract updateContent() : void; static update(){ //繰り返しメソッド GameObject.objects.forEach(obj => obj.updateContent()); //destroyFlagがtrueならshapeを削除 GameObject.objects = GameObject.objects.filter( obj =>{ if( obj.destroyFlag ) obj.delete(); return ( !obj.destroyFlag ); } ); if( GameObject.transit ) { GameObject.allDestroy(); GameObject.transit(); GameObject.transit = null; } } static allDestroy(){ GameObject.objects = GameObject.objects.filter( obj => { obj.destroy(); obj.delete(); return false; }); } //オブジェクトを削除 destroy() { this.destroyFlag = true; } //shapeの削除など、destroy後に後処理が必要なら記述 addDestroyMethod(){} private delete(){ this.addDestroyMethod(); if( this.shape ){ GameObject.display.removeChild(this.shape); this.shape = null; } } } abstract class PhysicsObject extends GameObject{ protected body : p2.Body = null; protected bodyShape : p2.Circle | p2.Box = null; protected static world : p2.World = null; constructor(){ super(); } abstract updateContent() : void; addDestroyMethod(){ CreateWorld.world.removeBody(this.body); } } |
Score.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
class Score extends GameObject{ static I:Score = null; // singleton instance score:number = 0; bestScore:number = 0; text:egret.TextField = null; textBest:egret.TextField = null; textColor : number = 0x00FF3B; constructor() { super(); this.textColor = Util.color(0,255,0); Score.I = this; this.score = 0; this.text = Util.myText(0, 0, "SCORE : 0", 100, 0.5, this.textColor, true); GameObject.display.addChild( this.text ); let bestScore = window.localStorage.getItem("bestScore"); // string if( bestScore == null ){ bestScore = "0"; window.localStorage.setItem("bestScore", bestScore); } this.bestScore = parseInt( bestScore ); this.textBest = Util.myText(0, 50, "BEST : " + bestScore, 100, 0.5, this.textColor, true); GameObject.display.addChild( this.textBest ); } onDestroy() { GameObject.display.removeChild( this.text ); this.text = null; GameObject.display.removeChild( this.textBest ); this.textBest = null; } updateContent() { this.text.text = "SCORE : " + this.score.toFixed(); if( this.bestScore < this.score ){ this.bestScore = this.score; this.textBest.text = "BEST : " + this.score.toFixed(); } } addScore(){ this.score += 1; } } |
GameOver.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
class GameOver extends GameObject{ textGameOver:egret.TextField = null; textScore:egret.TextField = null; textColor : number = 0x00FF3B; constructor() { super(); this.textGameOver = Util.myText(Game.width/2, Game.height/2 - 50, "GAME OVER", 100, 0.5, this.textColor, true); this.textGameOver.anchorOffsetX = this.textGameOver.width/2; this.textGameOver.anchorOffsetY = this.textGameOver.height/2; GameObject.display.addChild( this.textGameOver ); this.textScore = Util.myText(Game.width/2, Game.height/2 + 50, "SCORE : " + Score.I.score, 100, 0.5, this.textColor, true); this.textScore.anchorOffsetX = this.textScore.width/2; this.textScore.anchorOffsetY = this.textScore.height/2; GameObject.display.addChild( this.textScore ); if( Score.I.score >= Score.I.bestScore ){ window.localStorage.setItem("bestScore", Score.I.score.toFixed() ); // string } GameObject.display.once(egret.TouchEvent.TOUCH_TAP, (e: egret.TouchEvent) => this.tap(e), this); } onDestroy() { GameObject.display.removeChild( this.textGameOver ); this.textGameOver = null; GameObject.display.removeChild( this.textScore ); this.textScore = null; } updateContent() { GameObject.display.addChild( this.textGameOver ); GameObject.display.addChild( this.textScore ); } tap(e:egret.TouchEvent){ GameObject.transit = Game.init; this.destroy(); } } |
Ball.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
class Ball extends GameObject{ static I:Ball = null; // singleton instance private radius :number =null; constructor(x : number, y:number, radius:number) { super(); //Ball.I = this; this.setShape(x, y, radius); } setShape(x: number, y:number, radius: number){ if( this.shape ){ GameObject.display.removeChild(this.shape); } this.shape = new egret.Shape(); this.shape.x = x; this.shape.y = y; this.shape.graphics.beginFill(0xff0000); this.shape.graphics.drawCircle(0, 0, radius); this.shape.graphics.endFill(); GameObject.display.addChild(this.shape); } updateContent(){ } } abstract class PhysicsBall extends PhysicsObject{ //static I:PhysicsBall = null; // singleton instance private radius :number =null; constructor(x : number, y:number, radius:number) { super(); //PhysicsBall.I = this; this.setBody(x, y, radius); this.setShape(x, y, radius); } private setBody(x: number, y:number, radius: number){ this.body = new p2.Body({mass : 1, position:[x,y]}); this.bodyShape = new p2.Circle({ radius : radius, fixedRotation:true }); this.body.addShape(this.bodyShape); CreateWorld.world.addBody(this.body); } private setShape(x: number, y:number, radius: number){ if( this.shape ){ GameObject.display.removeChild(this.shape); } this.shape = new egret.Shape(); this.shape.x = x; this.shape.y = y; this.shape.graphics.beginFill(0xff0000); this.shape.graphics.drawCircle(0, 0, radius); this.shape.graphics.endFill(); GameObject.display.addChild(this.shape); } } class MyBall extends Ball{ constructor(x : number, y:number, radius:number) { super(x, y, radius); Ball.I = this; } } |
Box.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
class Box extends GameObject{ constructor(x : number, y : number, width : number, height : number, color:number) { super(); this.setShape(x, y, width, height, color); } setShape(x : number, y : number, width : number, height : number, color:number){ if( this.shape ){ GameObject.display.removeChild(this.shape); } this.shape = new egret.Shape(); this.shape.x = x; this.shape.y = y; this.shape.graphics.beginFill(color); this.shape.graphics.drawRect(0, 0, width , height); this.shape.graphics.endFill(); GameObject.display.addChild(this.shape); } updateContent(){}; } abstract class PhysicsBox extends PhysicsObject{ protected width :number; protected height :number; protected x : number; protected y : number; protected color : number; constructor(x : number, y : number, width : number, height : number, color:number) { super(); this.x = x; this.y = y; this.width = width ; this.height =height; this.color = color; this.setShape(this.width, this.height); } private setBody(x : number, y : number, width : number, height : number){ this.body = new p2.Body({mass : 1, position:[x,y], type:p2.Body.STATIC}); this.bodyShape = new p2.Box({ width : width, height: height }); this.body.addShape(this.bodyShape); CreateWorld.world.addBody(this.body); } setShape(width: number, height : number){ if( this.shape ){ GameObject.display.removeChild(this.shape); } this.shape = new egret.Shape(); this.shape.anchorOffsetX += width/2; this.shape.anchorOffsetY += height/2; this.shape.x = this.body.position[0]; this.shape.y = this.body.position[1]; this.shape.graphics.beginFill(this.color); this.shape.graphics.drawRect(0, 0, width , height); this.shape.graphics.endFill(); GameObject.display.addChild(this.shape); } } class MyBox extends Box{ constructor(x : number, y : number, width : number, height : number, color:number) { super(x, y, width, height, color); } } |
使い方
オブジェクトのインスタンス化
Main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
class Game{ public static height: number; public static width: number; static init() { this.height = egret.MainContext.instance.stage.stageHeight; this.width = egret.MainContext.instance.stage.stageWidth; /* new メソッドを記入*/ new Background(); new Score(); } } |
Main.tsのGameクラスのinit()内にnewしてください。init()はゲームをリセットしたり、リトライするときに使用します。
オブジェクトの削除
GameObject.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
abstract class GameObject { public shape:egret.Shape = null; public static objects: GameObject[] = []; public static display: egret.DisplayObjectContainer; public static transit:()=>void; protected destroyFlag : boolean = false; constructor() { GameObject.objects.push(this); } static initial(displayObjectContainer: egret.DisplayObjectContainer){ GameObject.objects = []; GameObject.display = displayObjectContainer; } abstract updateContent() : void; static update(){ //繰り返しメソッド GameObject.objects.forEach(obj => obj.updateContent()); //destroyFlagがtrueならshapeを削除 GameObject.objects = GameObject.objects.filter( obj =>{ if( obj.destroyFlag ) obj.delete(); return ( !obj.destroyFlag ); } ); if( GameObject.transit ) { GameObject.allDestroy(); GameObject.transit(); GameObject.transit = null; } } static allDestroy(){ GameObject.objects = GameObject.objects.filter( obj => { obj.destroy(); obj.delete(); return false; }); } //オブジェクトを削除 destroy() { this.destroyFlag = true; } //shapeの削除など、destroy後に後処理が必要なら記述 addDestroyMethod(){} private delete(){ this.addDestroyMethod(); if( this.shape ){ GameObject.display.removeChild(this.shape); this.shape = null; } } } |
BallもBoxもGameObjectクラスを継承しております。
オブジェクトを削除するときは destroy()メソッドを使用してください。
インスタンス化されたオブジェクトはstatic objectsにpushされてますので、destroyFlagがtrueになると、オブジェクトが削除されます。
なお、GameObjectはabstruct（抽象メソッド）ですので、継承した場合はupdateContent(){}をクラス内に追加してください。
このupdateContent(){}に記入されたメソッドはUnityのupdate()のように繰り返されます。
メソッドの連続実行
Main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Main extends eui.UILayer { public constructor() { super(); this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this); } private addToStage() { GameObject.initial( this.stage ); Util.init(this); Game.init(); egret.startTick(this.tickLoop, this); } tickLoop(timeStamp:number):boolean{ GameObject.update(); return false; } } |
GameObject.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
static update(){ //繰り返しメソッド GameObject.objects.forEach(obj => obj.updateContent()); //destroyFlagがtrueならshapeを削除 GameObject.objects = GameObject.objects.filter( obj =>{ if( obj.destroyFlag ) obj.delete(); return ( !obj.destroyFlag ); } ); if( GameObject.transit ) { GameObject.allDestroy(); GameObject.transit(); GameObject.transit = null; } } |
Unityのupdate関数のように、常にメソッドを連続実行したい場合は、BallやBox内のupdateContent(){}に関数を記載してください。
GameObject.update()がMainでtickLoopされて、フレームレート60で繰り返されます。
GameObjectを継承した場合は、updateContent(){}を追加しないとエラーになりますので、繰り返しをしない場合でも空メソッドとして追記してください。
シーンの切り替え
GameOver.ts
|
1 2 3 4 |
tap(e:egret.TouchEvent){ GameObject.transit = Game.init; this.destroy(); } |
GameObject.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
static update(){ //繰り返しメソッド GameObject.objects.forEach(obj => obj.updateContent()); //destroyFlagがtrueならshapeを削除 GameObject.objects = GameObject.objects.filter( obj =>{ if( obj.destroyFlag ) obj.delete(); return ( !obj.destroyFlag ); } ); if( GameObject.transit ) { GameObject.allDestroy(); GameObject.transit(); GameObject.transit = null; } } |
シーンを切り替えるときはGameObject.transit = 関数; のように利用します。
allDestroyでGameObject系を全て削除した後、transitに代入した関数が実行されます。
リトライするときはinit()を代入するといいでしょう。
HTML5 Egret Engine 入門へ戻る
