update to vite

This commit is contained in:
lanxu 2024-10-27 19:48:55 +02:00
parent d96fc2b077
commit 7b7e6ce838
9 changed files with 880 additions and 4328 deletions

View File

@ -9,7 +9,7 @@
<body>
<div id="silver-fang-mini-game"></div>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<script src="./bootstrap.js"></script>
<script type="module" src="/bootstrap.ts"></script>
</body>
</html>

View File

@ -2,5 +2,4 @@
import Game from "./src/game-base";
const game = new Game('silver-fang-minigame');
game.start();
const game = new Game({ parent: 'silver-fang-minigame' });

5050
www/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -7,20 +7,16 @@
"create-wasm-app": ".bin/create-wasm-app.js"
},
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server"
"build": "tsc && vite build",
"start": "vite"
},
"homepage": "https://github.com/rustwasm/create-wasm-app#readme",
"devDependencies": {
"copy-webpack-plugin": "^12.0.2",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"webpack": "^5.x.x",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
"typescript": "^5.6.3",
"vite": "^5.4.9"
},
"dependencies": {
"mini-game": "file:../pkg",
"phaser": "^3.80.1"
"phaser": "^3.86.0"
}
}

View File

@ -1,15 +1,46 @@
import * as MiniGame from "mini-game";
// import * as MiniGame from "mini-game";
import * as Phaser from "phaser";
import MainMenuScene from "./scenes/main-menu-scene";
class Game {
parent: string = ''
phaserGame: Phaser.Game = null
constructor(parent: string) {
this.parent = parent ?? 'game'
const GameConfig: Phaser.Types.Core.GameConfig = {
title: 'ExampleGame',
version: '2.0',
width: 800,
height: 600,
type: Phaser.AUTO,
parent: 'app',
// `as as Phaser.Types.Scenes.SettingsConfig[]` is required until https://github.com/photonstorm/phaser/pull/6235
scene: [MainMenuScene] as Phaser.Types.Scenes.SettingsConfig[],
input: {
keyboard: true
},
physics: {
default: 'arcade',
arcade: {
debug: false
}
},
backgroundColor: '#300000',
render: { pixelArt: false, antialias: false },
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
// `fullscreenTarget` must be defined for phones to not have
// a small margin during fullscreen.
fullscreenTarget: 'app',
expandParent: false,
},
};
start() {
class Game extends Phaser.Game {
//parent: string = ''
//phaserGame: Phaser.Game | null = null
//constructor(parent: string) {
// this.parent = parent ?? 'game'
//}
/*start() {
this.phaserGame = new Phaser.Game({
type: Phaser.AUTO,
parent: this.parent,
@ -17,8 +48,17 @@ class Game {
height: 600,
backgroundColor: 'rgba(80, 80, 80, 0)',
scene: [MainMenuScene],
});
})
return this.phaserGame
}*/
constructor(config: Phaser.Types.Core.GameConfig) {
super({ ...GameConfig, ...config });
}
}
/*window.addEventListener('load', () => {
// Expose `_game` to allow debugging, mute button and fullscreen button
(window as any)._game = new Game(GameConfig);
});*/
export default Game;

View File

@ -2,32 +2,43 @@ import * as Phaser from "phaser";
class GameButton {
group: Phaser.GameObjects.Group | null = null;
sprite: Phaser.GameObjects.Sprite | null = null;
constructor(scene: Phaser.Scene, x: number, y: number, text: string) {
const textObject = new Phaser.GameObjects.Text(scene, x, y, text, {
color: 'black',
})
textObject.setOrigin(.5, .5)
const bgObject = new Phaser.GameObjects.Sprite(scene, x, y, 'button-bg-inactive')
bgObject.setScale(((textObject.width + 40) / 48), ((textObject.height + 40) / 48))
bgObject.setInteractive();
bgObject.on('pointerover', () => {
})
textObject.setOrigin(.5, .5)
const topLeft = new Phaser.GameObjects.Image(scene, x, y, 'button-bg', 0)
const top = new Phaser.GameObjects.Image(scene, x, y, 'button-bg', 1)
const topRight = new Phaser.GameObjects.Image(scene, x, y, 'button-bg', 2)
// bgObject.setScale(((textObject.width + 40) / 48), ((textObject.height + 40) / 48))
//bgObject.setInteractive();
//bgObject.on('pointerover', () => {
//})
const buttonGroup = new Phaser.GameObjects.Group(scene)
buttonGroup.add(textObject)
buttonGroup.add(bgObject)
buttonGroup.add(topLeft)
buttonGroup.add(topRight)
this.group = buttonGroup
scene.add.existing(bgObject)
scene.add.existing(topLeft)
scene.add.existing(topRight)
scene.add.existing(textObject)
scene.add.existing(buttonGroup)
console.log(textObject.width, textObject.height)
}
onEvent(eventName: any, fn: any) {
this.sprite?.on(eventName, fn)
}
moveTo(x: number, y: number) {
this.group.setXY(x, y)
this.group?.setXY(x, y)
}
}
export default GameButton;

View File

@ -1,16 +1,17 @@
import * as Phaser from "phaser";
import ButtonSprite from "../objects/button-sprite";
// import ButtonSprite from "../objects/button-sprite";
import GameButton from "../objects/button";
class MainMenuScene extends Phaser.Scene {
preload() {
this.load.image('button-bg', 'assets/panel-000.png');
// this.load.image('button-bg', 'assets/panel-000.png');
this.load.spritesheet('button-bg', 'assets/panel-000.png', { frameWidth: 16, frameHeight: 16 });
}
create() {
const button = new GameButton(this, 0, 0, 'LOL');
const button = new GameButton(this, 0, 0, 'A B C D E F G H I J');
button.moveTo(100, 100)
button.moveTo(130, 100)
}
}

View File

@ -1,10 +1,18 @@
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es2022",
"target": "es5",
"allowJs": true,
"moduleResolution": "node"
}
"target": "ESNext",
"module": "ESNext",
"lib": ["ESNext", "DOM", "scripthost"],
"moduleResolution": "Node",
"strict": true,
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"types": ["vite/client"],
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true
},
"include": ["./src"]
}

9
www/vite.config.js Normal file
View File

@ -0,0 +1,9 @@
export default {
// Define `base` because this deploys to user.github.io/repo-name/
base: './',
build: {
// Do not inline images and assets to avoid the phaser error
// "Local data URIs are not supported"
assetsInlineLimit: 0
},
}