-
-
Notifications
You must be signed in to change notification settings - Fork 39
/
App.tsx
94 lines (85 loc) 路 2.1 KB
/
App.tsx
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
93
94
import React, { useState, useEffect, useRef } from 'react'
import Phaser from 'phaser'
import { IonPhaser, GameInstance } from '@ion-phaser/react'
import logo from './assets/logo.png'
import './App.css'
class MainScene extends Phaser.Scene {
private helloWorld!: Phaser.GameObjects.Text
init () {
this.cameras.main.setBackgroundColor('#24252A')
}
create () {
this.helloWorld = this.add.text(
this.cameras.main.centerX,
this.cameras.main.centerY,
"Hello World", {
font: "40px Arial",
color: "#ffffff"
}
);
this.helloWorld.setOrigin(0.5);
}
update () {
this.helloWorld.angle += 1;
}
}
const gameConfig: GameInstance = {
width: "100%",
height: "100%",
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: '100%',
height: '100%'
},
render: {
antialias: false,
pixelArt: true,
roundPixels: true
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 400 },
debug: true
}
},
scene: MainScene
};
export default function App () {
const gameRef = useRef<HTMLIonPhaserElement>()
const [game, setGame] = useState<GameInstance>()
const [initialize, setInitialize] = useState(false)
const destroy = () => {
gameRef.current?.destroy()
setInitialize(false)
setGame(undefined)
}
useEffect(() => {
if (initialize) {
setGame(Object.assign({}, gameConfig))
}
}, [initialize])
return (
<div className="App">
<header className="App-header">
{ initialize ? (
<>
<IonPhaser ref={gameRef} game={game} initialize={initialize} />
<div onClick={destroy} className="flex destroyButton">
<a href="#1" className="bttn">Destroy</a>
</div>
</>
) : (
<>
<img src={logo} className="App-logo" alt="logo" />
<div onClick={() => setInitialize(true)} className="flex">
<a href="#1" className="bttn">Initialize</a>
</div>
</>
)}
</header>
</div>
);
}