Browse code

add title and options menu

devnewton authored on 28/10/2016 at 22:41:55
Showing 8 changed files
... ...
@@ -1,6 +1,8 @@
1 1
 /// <reference path="../typings/phaser.d.ts"/>
2 2
 import {Intro} from "./states/Intro.ts";
3 3
 import {Title} from "./states/Title.ts";
4
+import {Options} from "./states/Options.ts";
5
+import {KeyboardOptions} from "./states/KeyboardOptions.ts";
4 6
 import {Level} from "./states/Level.ts";
5 7
 import {GameOver} from "./states/GameOver.ts";
6 8
 import {Controls} from "./utils/Controls.ts";
... ...
@@ -16,6 +18,8 @@ export class ShmuprpgGame extends Phaser.Game {
16 16
         });
17 17
         this.state.add('Intro', Intro);
18 18
         this.state.add('Title', Title);
19
+        this.state.add('Options', Options);
20
+        this.state.add('KeyboardOptions', KeyboardOptions);
19 21
         this.state.add('Level', Level);
20 22
         this.state.add('GameOver', GameOver);
21 23
     }
... ...
@@ -29,7 +33,7 @@ export class ShmuprpgGame extends Phaser.Game {
29 29
 
30 30
     createGame() {
31 31
         this.controls = new Controls(this);
32
-        this.state.start('Level');
32
+        this.state.start('Title');
33 33
     }
34 34
 
35 35
     addSpriteAnimation(sprite: Phaser.Sprite, animationName: string, frameCount: number): Phaser.Animation {
36 36
new file mode 100644
37 37
Binary files /dev/null and b/app/assets/menu/buttons.png differ
38 38
new file mode 100644
... ...
@@ -0,0 +1,6 @@
0
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
1
+<TextureAtlas imagePath="bunny01.png">
2
+    <SubTexture name="out" x="0" y="0" width="857" height="105" />
3
+    <SubTexture name="over" x="0" y="105" width="857" height="105" />
4
+    <SubTexture name="down" x="0" y="210" width="857" height="104" />
5
+</TextureAtlas>
0 6
new file mode 100644
... ...
@@ -0,0 +1,34 @@
0
+/// <reference path="../../typings/phaser.d.ts"/>
1
+import {AbstractState} from "./AbstractState.ts";
2
+import {MenuButton} from "../ui/MenuButton.ts";
3
+import { ShmuprpgGame } from "../ShmuprpgGame.ts";
4
+
5
+
6
+export class KeyboardOptions extends AbstractState {
7
+
8
+    constructor() {
9
+        super();
10
+    }
11
+
12
+    preload() {
13
+        MenuButton.preload(this.game);
14
+    }
15
+
16
+    create() {
17
+        super.create();
18
+        let logo = this.game.add.text(this.game.world.centerX, 0, 'Choose keyboard layout',{font: "68px monospace", fill: 'white'});
19
+        logo.scale.x = 2;
20
+        logo.scale.y = 2;
21
+        logo.anchor.setTo(0.5, 0);
22
+
23
+        new MenuButton(this.game, "Azerty zsqd + ikjl", 500, 300, () => {
24
+            (<ShmuprpgGame>this.game).controls.useAzertyLayout();
25
+            this.game.state.start('Options');
26
+        });
27
+        new MenuButton(this.game, "Qwerty wsad + ikjl", 500, 450, () => {
28
+            (<ShmuprpgGame>this.game).controls.useQwertyLayout();
29
+            this.game.state.start('Options');
30
+        });
31
+        new MenuButton(this.game, "Back", 500, 600, () => this.game.state.start('Options'));
32
+    }
33
+}
0 34
new file mode 100644
... ...
@@ -0,0 +1,25 @@
0
+/// <reference path="../../typings/phaser.d.ts"/>
1
+import {AbstractState} from "./AbstractState.ts";
2
+import {MenuButton} from "../ui/MenuButton.ts";
3
+
4
+export class Options extends AbstractState {
5
+
6
+    constructor() {
7
+        super();
8
+    }
9
+
10
+    preload() {
11
+        MenuButton.preload(this.game);
12
+    }
13
+
14
+    create() {
15
+        super.create();
16
+        let logo = this.game.add.text(this.game.world.centerX, 0, 'Options',{font: "120px monospace", fill: 'white'});
17
+        logo.scale.x = 2;
18
+        logo.scale.y = 2;
19
+        logo.anchor.setTo(0.5, 0);
20
+
21
+        new MenuButton(this.game, "Keyboard", 500, 300, () => this.game.state.start('KeyboardOptions'));
22
+        new MenuButton(this.game, "Back", 500, 450, () => this.game.state.start('Title'));
23
+    }
24
+}
... ...
@@ -1,5 +1,6 @@
1 1
 /// <reference path="../../typings/phaser.d.ts"/>
2
-import { AbstractState } from "./AbstractState.ts"; // you import only AClass
2
+import {AbstractState} from "./AbstractState.ts";
3
+import {MenuButton} from "../ui/MenuButton.ts";
3 4
 
4 5
 export class Title extends AbstractState {
5 6
 
... ...
@@ -9,11 +10,17 @@ export class Title extends AbstractState {
9 9
 
10 10
     preload() {
11 11
         this.game.load.image('logo', 'title/logo.png');
12
+        MenuButton.preload(this.game);
12 13
     }
13 14
 
14 15
     create() {
15 16
         super.create();
16
-        var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo');
17
-        logo.anchor.setTo(0.5, 0.5);
17
+        let logo = this.game.add.sprite(this.game.world.centerX, 0, 'logo');
18
+        logo.scale.x = 2;
19
+        logo.scale.y = 2;
20
+        logo.anchor.setTo(0.5, 0);
21
+
22
+        new MenuButton(this.game, "Start", 500, 300, () => this.game.state.start('Level'));
23
+        new MenuButton(this.game, "Options", 500, 450, () => this.game.state.start('Options'));
18 24
     }
19 25
 }
20 26
new file mode 100644
... ...
@@ -0,0 +1,15 @@
0
+/// <reference path="../../typings/phaser.d.ts"/>
1
+export class MenuButton extends Phaser.Button{
2
+
3
+    constructor(game: Phaser.Game, label: string, x: number, y: number, callback: Function) {
4
+        super(game, x, y, 'menu-buttons', callback, null, 'over', 'out', 'down');
5
+        let labelText = new Phaser.Text(this.game, 140, 15, label, {font: "64px monospace", fill: 'white'});
6
+        this.addChild(labelText);
7
+        game.add.existing(this);
8
+    }
9
+
10
+    static preload(game: Phaser.Game) {
11
+        game.load.atlasXML('menu-buttons', 'menu/buttons.png', 'menu/buttons.xml');
12
+    }
13
+
14
+}
0 15
\ No newline at end of file
... ...
@@ -4,12 +4,49 @@ export class Controls {
4 4
     kb: Phaser.Keyboard;
5 5
     pad: Phaser.SinglePad;
6 6
     game: Phaser.Game;
7
+    keyCodeZ: number;
8
+    keyCodeS: number;
9
+    keyCodeQ: number;
10
+    keyCodeD: number;
11
+    keyCodeI: number;
12
+    keyCodeK: number;
13
+    keyCodeJ: number;
14
+    keyCodeL: number;
7 15
 
8 16
     constructor(game: Phaser.Game) {
9 17
         this.game = game;
10 18
         game.input.gamepad.start();
11 19
         this.kb = game.input.keyboard;
12 20
         this.pad = game.input.gamepad.pad1;
21
+        if (localStorage.getItem('keyboard.layout') == 'qwerty') {
22
+            this.useQwertyLayout();
23
+        } else {
24
+            this.useAzertyLayout();
25
+        }
26
+    }
27
+
28
+    useAzertyLayout() {
29
+        this.keyCodeZ = Phaser.KeyCode.Z;
30
+        this.keyCodeS = Phaser.KeyCode.S;
31
+        this.keyCodeQ = Phaser.KeyCode.Q;
32
+        this.keyCodeD = Phaser.KeyCode.D;
33
+        this.keyCodeI = Phaser.KeyCode.I;
34
+        this.keyCodeK = Phaser.KeyCode.K;
35
+        this.keyCodeJ = Phaser.KeyCode.J;
36
+        this.keyCodeL = Phaser.KeyCode.L;
37
+        localStorage.setItem('keyboard.layout', 'azerty');
38
+    }
39
+
40
+    useQwertyLayout() {
41
+        this.keyCodeZ = Phaser.KeyCode.W;
42
+        this.keyCodeS = Phaser.KeyCode.S;
43
+        this.keyCodeQ = Phaser.KeyCode.A;
44
+        this.keyCodeD = Phaser.KeyCode.D;
45
+        this.keyCodeI = Phaser.KeyCode.I;
46
+        this.keyCodeK = Phaser.KeyCode.K;
47
+        this.keyCodeJ = Phaser.KeyCode.J;
48
+        this.keyCodeL = Phaser.KeyCode.L;
49
+        localStorage.setItem('keyboard.layout', 'qwerty');
13 50
     }
14 51
 
15 52
     shootingAngle(shooterX: number, shooterY: number): number {
... ...
@@ -50,15 +87,15 @@ export class Controls {
50 50
 
51 51
     private shootingFromKeyboard(): number {
52 52
         let dx = 0;
53
-        if (this.kb.isDown(Phaser.KeyCode.J)) {
53
+        if (this.kb.isDown(this.keyCodeJ)) {
54 54
             dx = -1;
55
-        } else if (this.kb.isDown(Phaser.KeyCode.L)) {
55
+        } else if (this.kb.isDown(this.keyCodeL)) {
56 56
             dx = 1;
57 57
         }
58 58
         let dy = 0;
59
-        if (this.kb.isDown(Phaser.KeyCode.I)) {
59
+        if (this.kb.isDown(this.keyCodeI)) {
60 60
             dy = -1;
61
-        } else if (this.kb.isDown(Phaser.KeyCode.K)) {
61
+        } else if (this.kb.isDown(this.keyCodeK)) {
62 62
             dy = 1;
63 63
         }
64 64
         if (dx != 0 || dy != 0) {
... ...
@@ -72,26 +109,26 @@ export class Controls {
72 72
         return this.pad.isDown(Phaser.Gamepad.XBOX360_DPAD_UP)
73 73
             || this.pad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) < -this.pad.deadZone
74 74
             || this.kb.isDown(Phaser.KeyCode.UP)
75
-            || this.kb.isDown(Phaser.KeyCode.Z);
75
+            || this.kb.isDown(this.keyCodeZ);
76 76
     }
77 77
     isGoingDown(): boolean {
78 78
         return this.pad.isDown(Phaser.Gamepad.XBOX360_DPAD_DOWN)
79 79
             || this.pad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) > this.pad.deadZone
80 80
             || this.kb.isDown(Phaser.KeyCode.DOWN)
81
-            || this.kb.isDown(Phaser.KeyCode.S);
81
+            || this.kb.isDown(this.keyCodeS);
82 82
     }
83 83
 
84 84
     isGoingLeft(): boolean {
85 85
         return this.pad.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT)
86 86
             || this.pad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -this.pad.deadZone
87 87
             || this.kb.isDown(Phaser.KeyCode.LEFT)
88
-            || this.kb.isDown(Phaser.KeyCode.Q);
88
+            || this.kb.isDown(this.keyCodeQ);
89 89
     }
90 90
 
91 91
     isGoingRight(): boolean {
92 92
         return this.pad.isDown(Phaser.Gamepad.XBOX360_DPAD_RIGHT)
93 93
             || this.pad.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > this.pad.deadZone
94 94
             || this.kb.isDown(Phaser.KeyCode.RIGHT)
95
-            || this.kb.isDown(Phaser.KeyCode.D);
95
+            || this.kb.isDown(this.keyCodeD);
96 96
     }
97 97
 }
98 98
\ No newline at end of file