Browse code

add team selection screen

devnewton authored on 18/12/2016 at 01:32:05
Showing 8 changed files
... ...
@@ -7,6 +7,7 @@ import {KeyboardOptionsBindKey} from "./states/KeyboardOptionsBindKey";
7 7
 import {GamepadOptions} from "./states/GamepadOptions";
8 8
 import {GamepadOptionsLayout} from "./states/GamepadOptionsLayout";
9 9
 import {GamepadOptionsBindAxisOrButton} from "./states/GamepadOptionsBindAxisOrButton";
10
+import {TeamSelectScreen} from "./states/TeamSelectScreen";
10 11
 import {Level} from "./states/Level";
11 12
 import {Controllers} from "./utils/Controls";
12 13
 
... ...
@@ -27,6 +28,7 @@ export class UnderthiefGame extends Phaser.Game {
27 27
         this.state.add('KeyboardOptions', KeyboardOptions);
28 28
         this.state.add('KeyboardOptionsBindKey', KeyboardOptionsBindKey);
29 29
         this.state.add('GamepadOptions', GamepadOptions);
30
+        this.state.add('TeamSelectScreen', TeamSelectScreen);
30 31
         this.state.add('Level', Level);
31 32
     }
32 33
 
... ...
@@ -20,4 +20,6 @@
20 20
     <SubTexture name="player.walk.right1" x="144" y="48" width="48" height="48" />
21 21
     <SubTexture name="player.walk.right2" x="144" y="96" width="48" height="48" />
22 22
     <SubTexture name="player.walk.right3" x="144" y="144" width="48" height="48" />
23
+    <!-- wait -->
24
+    <SubTexture name="player.wait0" x="0" y="0" width="48" height="48" />
23 25
 </TextureAtlas>
... ...
@@ -13,7 +13,9 @@ export class Player extends Phaser.Sprite {
13 13
         (<UnderthiefGame>game).addSpriteAnimation(this, 'player.walk.front', 4);
14 14
         (<UnderthiefGame>game).addSpriteAnimation(this, 'player.walk.left', 4);
15 15
         (<UnderthiefGame>game).addSpriteAnimation(this, 'player.walk.right', 4);
16
-        this.play("player.walk.front", 0, false);
16
+        (<UnderthiefGame>game).addSpriteAnimation(this, 'player.wait', 1);
17
+
18
+        this.play("player.wait", 8, false);
17 19
         this.anchor.setTo(0.5, 0.5);
18 20
         this.game.physics.enable(this, Phaser.Physics.ARCADE);
19 21
         this.body.collideWorldBounds = true;
... ...
@@ -27,7 +29,7 @@ export class Player extends Phaser.Sprite {
27 27
         game.load.atlasXML('george2', 'sprites/opengameart/george2.png', 'sprites/opengameart/player.xml');
28 28
     }
29 29
 
30
-    oldPos = new Phaser.Point(0,0);
30
+    oldPos = new Phaser.Point(0, 0);
31 31
 
32 32
     update() {
33 33
         super.update();
... ...
@@ -61,7 +63,7 @@ export class Player extends Phaser.Sprite {
61 61
             } else if (this.body.velocity.x > 0) {
62 62
                 this.play("player.walk.right", 8, false);
63 63
             } else {
64
-                this.play("player.walk.front", 0, false);
64
+                this.play("player.wait", 8, false);
65 65
             }
66 66
         }
67 67
     }
... ...
@@ -14,16 +14,16 @@ export class Options extends AbstractState {
14 14
 
15 15
     create() {
16 16
         super.create();
17
-        let logo = this.game.add.text(this.game.world.centerX, 0, 'Options', { font: "120px monospace", fill: 'white' });
17
+        let logo = this.game.add.text(this.game.world.centerX, 0, 'Options', { font: "100px monospace", fill: 'white' });
18 18
         logo.scale.x = 2;
19 19
         logo.scale.y = 2;
20 20
         logo.anchor.setTo(0.5, 0);
21 21
 
22
-        let y = 150;
23
-        new MenuButton(this.game, "Keyboard", 500, y += 150, () => this.game.state.start('KeyboardOptions'));
22
+        let y = 100;
23
+        new MenuButton(this.game, "Keyboard", 200, y += 150, () => this.game.state.start('KeyboardOptions'));
24 24
         if (this.input.gamepad.supported) {
25
-            new MenuButton(this.game, "Gamepad", 500, y += 150, () => this.game.state.start('GamepadOptions'));
25
+            new MenuButton(this.game, "Gamepad", 200, y += 150, () => this.game.state.start('GamepadOptions'));
26 26
         }
27
-        new MenuButton(this.game, "Back", 500, y += 150, () => this.game.state.start('Title'));
27
+        new MenuButton(this.game, "Back", 200, y += 150, () => this.game.state.start('Title'));
28 28
     }
29 29
 }
30 30
new file mode 100644
... ...
@@ -0,0 +1,86 @@
0
+/// <reference path="../../typings/phaser.d.ts"/>
1
+import { AbstractState } from "./AbstractState";
2
+import { MenuButton } from "../ui/MenuButton";
3
+import { MenuSelect, MenuSelectOption } from "../ui/MenuSelect";
4
+import { UnderthiefGame } from "../UnderthiefGame";
5
+import { ControllerType } from "../utils/Controls";
6
+
7
+export class TeamSelectScreen extends AbstractState {
8
+
9
+    constructor() {
10
+        super();
11
+    }
12
+
13
+    preload() {
14
+        MenuButton.preload(this.game);
15
+        MenuSelect.preload(this.game);
16
+        this.game.load.atlasXML('betty', 'sprites/opengameart/betty.png', 'sprites/opengameart/player.xml');
17
+        this.game.load.atlasXML('betty2', 'sprites/opengameart/betty2.png', 'sprites/opengameart/player.xml');
18
+        this.game.load.atlasXML('george', 'sprites/opengameart/george.png', 'sprites/opengameart/player.xml');
19
+        this.game.load.atlasXML('george2', 'sprites/opengameart/george2.png', 'sprites/opengameart/player.xml');
20
+
21
+    }
22
+
23
+    create() {
24
+        super.create();
25
+        let logo = this.game.add.text(this.game.world.centerX, 0, 'Team selection', { font: "64px monospace", fill: 'white' });
26
+        logo.scale.x = 2;
27
+        logo.scale.y = 2;
28
+        logo.anchor.setTo(0.5, 0);
29
+
30
+        let betty = this.add.sprite(150, 175, 'betty', 0);
31
+        (<UnderthiefGame>this.game).addSpriteAnimation(betty, 'player.wait', 1);
32
+        betty.play('player.wait', 8, true);
33
+
34
+        let betty2 = this.add.sprite(150, 275, 'betty2', 0);
35
+        (<UnderthiefGame>this.game).addSpriteAnimation(betty2, 'player.wait', 1);
36
+        betty2.play('player.wait', 8, true);
37
+
38
+        let george = this.add.sprite(1060, 375, 'george', 0);
39
+        (<UnderthiefGame>this.game).addSpriteAnimation(george, 'player.wait', 1);
40
+        george.play('player.wait', 8, true);
41
+
42
+        let george2 = this.add.sprite(1060, 475, 'george2', 0);
43
+        (<UnderthiefGame>this.game).addSpriteAnimation(george2, 'player.wait', 1);
44
+        george2.play('player.wait', 8, true);
45
+
46
+        let playerOptions = [
47
+            new MenuSelectOption<ControllerType>(ControllerType.CPU, 'CPU'),
48
+            new MenuSelectOption<ControllerType>(ControllerType.KEYBOARD, 'Keyboard'),
49
+            new MenuSelectOption<ControllerType>(ControllerType.PAD1, 'Pad 1'),
50
+            new MenuSelectOption<ControllerType>(ControllerType.PAD2, 'Pad 2'),
51
+            new MenuSelectOption<ControllerType>(ControllerType.PAD4, 'Pad 3'),
52
+            new MenuSelectOption<ControllerType>(ControllerType.PAD4, 'Pad 4')
53
+        ];
54
+
55
+        let bettySelect = new MenuSelect<ControllerType>(this.game, 200, 150, playerOptions);
56
+        let betty2Select = new MenuSelect<ControllerType>(this.game, 200, 250, playerOptions);
57
+        let georgeSelect = new MenuSelect<ControllerType>(this.game, 200, 350, playerOptions);
58
+        let george2Select = new MenuSelect<ControllerType>(this.game, 200, 450, playerOptions);
59
+
60
+        switch (this.input.gamepad.padsConnected) {
61
+            case 0:
62
+                bettySelect.setSelectedValue(ControllerType.KEYBOARD);
63
+                break;
64
+            case 1:
65
+                bettySelect.setSelectedValue(ControllerType.PAD1);
66
+                break;
67
+            case 2:
68
+                bettySelect.setSelectedValue(ControllerType.PAD1);
69
+                georgeSelect.setSelectedValue(ControllerType.PAD2);
70
+                break;
71
+            case 3:
72
+                bettySelect.setSelectedValue(ControllerType.PAD1);
73
+                betty2Select.setSelectedValue(ControllerType.PAD2);
74
+                georgeSelect.setSelectedValue(ControllerType.PAD3);
75
+                break;
76
+            default:
77
+                bettySelect.setSelectedValue(ControllerType.PAD1);
78
+                betty2Select.setSelectedValue(ControllerType.PAD2);
79
+                georgeSelect.setSelectedValue(ControllerType.PAD3);
80
+                george2Select.setSelectedValue(ControllerType.PAD4);
81
+                break;
82
+        }
83
+        new MenuButton(this.game, "Play", 200, 600, () => this.game.state.start('Level'));
84
+    }
85
+}
... ...
@@ -22,7 +22,7 @@ export class Title extends AbstractState {
22 22
         logo.scale.y = 1.4;
23 23
         logo.anchor.setTo(0.5, 0);
24 24
 
25
-        new MenuButton(this.game, "Start", 200, 250, () => this.game.state.start('Level'));
25
+        new MenuButton(this.game, "Start", 200, 250, () => this.game.state.start('TeamSelectScreen'));
26 26
         new MenuButton(this.game, "Options", 200, 400, () => this.game.state.start('Options'));
27 27
         new MenuButton(this.game, "Help", 200, 550, () => this.game.state.start('Help'));
28 28
     }
29 29
new file mode 100644
... ...
@@ -0,0 +1,47 @@
0
+/// <reference path="../../typings/phaser.d.ts"/>
1
+
2
+export class MenuSelectOption<T> {
3
+    label: string;
4
+    value: T;
5
+    callback: Function;
6
+
7
+    constructor(value: T, label: string, callback?: Function) {
8
+        this.label = label;
9
+        this.value = value;
10
+        this.callback = callback;
11
+    }
12
+}
13
+
14
+export class MenuSelect<T> extends Phaser.Button {
15
+
16
+    options: Array<MenuSelectOption<T>>;
17
+    selectedOption = 0;
18
+    labelText: Phaser.Text;
19
+    constructor(game: Phaser.Game, x: number, y: number, options: Array<MenuSelectOption<T>>) {
20
+        super(game, x, y, 'menu-buttons', () => this.toggle(), null, 'over', 'out', 'down');
21
+        this.options = options;
22
+        this.labelText = new Phaser.Text(this.game, 140, 15, options[0].label, { font: "64px monospace", fill: 'white' });
23
+        this.addChild(this.labelText);
24
+        game.add.existing(this);
25
+    }
26
+
27
+    toggle() {
28
+        this.selectedOption = (this.selectedOption + 1) % this.options.length;
29
+        this.labelText.setText(this.options[this.selectedOption].label);
30
+    }
31
+
32
+    getSelectedValue(): T {
33
+        return this.options[this.selectedOption].value;
34
+    }
35
+
36
+    setSelectedValue(optionValue: T) {
37
+        let foundIndex = this.options.findIndex((option: MenuSelectOption<T>) => option.value === optionValue);
38
+        this.selectedOption = foundIndex >= 0 ? foundIndex : 0;
39
+        this.labelText.setText(this.options[this.selectedOption].label);
40
+    }
41
+
42
+    static preload(game: Phaser.Game) {
43
+        game.load.atlasXML('menu-buttons', 'menu/buttons.png', 'menu/buttons.xml');
44
+    }
45
+
46
+}
0 47
\ No newline at end of file
... ...
@@ -1,5 +1,14 @@
1 1
 /// <reference path="../../typings/phaser.d.ts"/>
2 2
 
3
+export enum ControllerType {
4
+    CPU = -1,
5
+    KEYBOARD,
6
+    PAD1,
7
+    PAD2,
8
+    PAD3,
9
+    PAD4
10
+}
11
+
3 12
 export class Controllers {
4 13
     controllers: Array<AbstractControls>;
5 14