Ajuda com aprendizado em javascript - babylonjs - webpack. Classe náo compila com variaveis da classe.
Ola, boa tarde.
Estou tentando montar um projeto de game de cartas em webgl usando babylonjs+webpack. O problema é que na hora de compilar uma classe, o webpack não esta deixando se eu declaro variaveis da classe logo acima do construtor, retornando o seguinte erro:
Erro:
RROR in ./src/game.js 33:9
Module parse failed: Unexpected token (33:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default class Game {
|
> scene;
| clickedButtonBJ;|
@ ./src/index.js 3:0-29 17:15-19
Segue meus arquivos de configuração do webpack e do package.json e o código especifico da classe game.js.
Webpack.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: true,
template: path.resolve(__dirname, 'src', 'index.html'),
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
}
}
package.json:
{
"name": "synthgaming.tech",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"run-dev": "npx webpack-dev-server",
"build": "webpack --config=webpack.config.prod.js",
"build-dev": "webpack --config=webpack.config.dev.js",
"start": "webpack-dev-server --config=webpack.config.dev.js --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babylonjs/core": "^4.1.0",
"@babylonjs/gui": "^4.1.0",
"@babylonjs/inspector": "^4.1.0",
"@babylonjs/loaders": "^4.1.0",
"@babylonjs/materials": "^4.1.0",
"@babylonjs/post-processes": "^4.1.0",
"@babylonjs/procedural-textures": "^4.1.0",
"@babylonjs/serializers": "^4.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.2.0",
"ts-loader": "^7.0.0",
"typescript": "^3.8.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
}
game.js:
import {
Vector3, Color3
} from "@babylonjs/core/Maths/math";
import {
ArcRotateCamera
} from "@babylonjs/core/Cameras/arcRotateCamera";
import {
HemisphericLight
} from "@babylonjs/core/Lights/hemisphericLight";
import {
Mesh
} from "@babylonjs/core/Meshes/mesh";
import {
GridMaterial
} from "@babylonjs/materials/grid";
import {
Sound, HighlightLayer
} from "@babylonjs/core"
import {
Image, Control, AdvancedDynamicTexture, Button, TextBlock
} from "@babylonjs/gui";
import {
Scene
} from "@babylonjs/core";
export default class Game {
scene;
clickedButtonBJ;
constructor(){
// this.scene = _scene;
this.clickedButtonBJ = false;
}
Start(scene) {
var camera = new ArcRotateCamera("gameCamera", 0,0,0, new Vector3(0, 5, -10), scene);
camera.setPosition(new Vector3(0,1,-40));
camera.setTarget(Vector3.Zero());
var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
light.intensity = 0.49;
var tetraMaterial = new GridMaterial("Tetragrid" , scene);
var tetra = new Mesh.CreatePolyhedron("tetra", {type: 0, size: 3}, scene);
tetra.position.y = 4.8;
tetra.position.z = -15;
tetra.rotation.z = Math.PI/2;
tetra.rotation.x = 4*Math.PI/3;
var hl1 = new HighlightLayer("hl1", scene);
hl1.addMesh(tetra, Color3.Magenta());
tetra.material = tetraMaterial;
var groundMaterial = new GridMaterial("grid", scene);
groundMaterial.lineColor = new Color3(2,2,4);
var ground = new Mesh.CreateGround("ground1", 600, 600, 3, scene);
ground.material = groundMaterial;
var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", scene);
var titleImage = new Image("title","../res/Title.png");
titleImage.width = "800px";
titleImage.height = "300px";
titleImage.top = "-50px";
titleImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
titleImage.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
advancedTexture.addControl(titleImage);
var backMusic = new Sound ("Music", "../res/raia-bellzy.wav",scene, null, {
loop: true,
autoplay: true
});
var alpha = 0;
scene.registerBeforeRender(() => {
tetra.rotation.y += 0.005;
alpha += 0.03;
hl1.blurHorizontalSize = 0.3 + Math.cos(alpha) * 0.6 + 0.6;
hl1.blurVerticalSize = 0.3 + Math.sin(alpha / 3) * 0.6 + 0.6;
});
}
createNewScene(_engine) {
var scene = new Scene(_engine);
scene.autoClear = false;
var camera = new ArcRotateCamera("gameCamera", 0,0,0, new Vector3(0, 5, -10), scene);
camera.setPosition(new Vector3(0,1,-40));
camera.setTarget(Vector3.Zero());
var light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
light.intensity = 0.49;
return scene;
}
disposeScene(_scene) {
_scene.dispose();
}
createPrimaryMenu(_scene) {
var advancedTexture = new AdvancedDynamicTexture.CreateFullscreenUI("PrimaryUI", _scene);
var buttonBJ = Button.CreateSimpleButton("butBJ","BlackJack");
buttonBJ.width = "250px";
buttonBJ.height = "80px";
buttonBJ.color = "Black";
buttonBJ.cornerRadius = 3;
buttonBJ.background = "magenta";
buttonBJ.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
buttonBJ.left = "50px";
buttonBJ.onPointerMoveObservable.add(function(){
textblock.text = "Click to Play BlackJack"
});
buttonBJ.onPointerOutObservable.add(function() {
textblock.text = "";
});
buttonBJ.onPointerUpObservable.add(function () {
////
this.clickedButtonBJ = true;
console.log("0.8");
});
advancedTexture.addControl(buttonBJ);
var textblock = new TextBlock("textblock", "");
textblock.width = 0.2;
textblock.height = "40px";
textblock.color = "White";
advancedTexture.addControl(textblock);
}
}
Eis a questão, Se eu removo as duas linhas:
scene;
clickButtonBJ;
o código roda e eu consigo acessar o site... no entanto, não carrega na página a titleImage e nem a musica.
Alguém pode me ajudar?
Obrigado.Discussão (0)
Carregando comentários...