SkyWorld

Members
  • Content Count

    9
  • Joined

  • Last visited

About SkyWorld

  • Rank
    Newbie

Profile Information

  • Gender
    Male
  • Location
    Taiwan

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. SkyWorld

    Let Image Blur

    Is there a better way to make image blur in Phaser 3?
  2. I don't know if scene.switch is good for me. Because scene A is on screen all time, but scene B is only when click button to visible and hidden.
  3. I created two scenes: scene A and scene B. And Used the button on scene A to launch scene B. Now, I created a button on scene B and clicked it to close scene B, and then there is only scene A on Screen. How should I do to close scene B?
  4. Excuse me. Does there other library support Phaser 3?
  5. I want key-in math in game, so I use Phaser Input, but I got an error. in webpack.config.js: const Path = require('path'); const Webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: ['babel-polyfill', Path.join(__dirname, './src/scripts/main.js')], output: { path: Path.join(__dirname, './bundle'), filename: 'bundle.[hash:8].js', chunkFilename: '[name].[chunkhash:8].js', }, module: { rules: [ { test: /\.js$/, use: ['babel-loader'], include: Path.join(__dirname, 'src'), exclude: /node_modules/, }, { test: /\.(sa|sc|c)ss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'], }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, { test: /phaser-input\.js$/, use: 'exports-loader?PhaserInput=PhaserInput', }, { type: 'javascript/auto', test: /\.json$/, use: [ { loader: 'file-loader', options: { name: './plugin-config/[name].[ext]', }, }, ], }, ], }, mode: 'development', plugins: [ new CleanWebpackPlugin(['bundle']), new MiniCssExtractPlugin({ filename: 'main.[hash:8].css', }), new HtmlWebpackPlugin({ filename: 'index.html', template: Path.join(__dirname, './src/index.html'), }), new CopyWebpackPlugin([{ from: './src/assets/fonts/', to: './assets/fonts/' }]), new CopyWebpackPlugin([{ from: './src/assets/images/', to: './assets/images/' }]), new CopyWebpackPlugin([{ from: './src/assets/jsons/', to: './assets/jsons/' }]), new CopyWebpackPlugin([{ from: './src/assets/videos/', to: './assets/videos/' }]), new CopyWebpackPlugin([{ from: './src/assets/audios/', to: './assets/audios/' }]), new Webpack.DefinePlugin({ CANVAS_RENDERER: JSON.stringify(true), WEBGL_RENDERER: JSON.stringify(true), }), ], resolve: { alias: { // bind version of phaser-input 'phaser-input': '@orange-games/phaser-input/build/phaser-input.js', // bind to modules; modules: Path.join(__dirname, 'node_modules'), }, }, optimization: { splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'common', chunks: 'all', }, }, }, }, devServer: { contentBase: Path.join(__dirname, './bundle'), host: '10.10.0.10', port: 8081, }, }; In my js file: import Phaser from 'phaser'; import PhaserInput from '@orange-games/phaser-input/build/phaser-input'; // ... In my package.json: { ... "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.2", "css-loader": "^0.28.11", "eslint-config-airbnb-base": "^13.0.0", "eslint-plugin-import": "^2.13.0", "exports-loader": "^0.7.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.4.1", "node-sass": "^4.9.0", "optimize-css-assets-webpack-plugin": "^4.0.3", "postcss-loader": "^2.1.5", "postcss-preset-env": "^5.2.1", "resolve-url-loader": "^2.3.0", "sass-loader": "^7.0.3", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^4.14.0", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4" }, "dependencies": { "@orange-games/phaser-input": "^2.0.5", "phaser": "^3.10.1" } ... } But I get an error in Chrome Developer Tool: How should I solve this problem? Thanks.
  6. Thank you. After read your suggestions, I found there is an error in webpack sconfig setting. I don't copy the json file to the output folder.
  7. I used Phaser 3 and Webpack Development Server to create a game. But when I used atlas(key [, textureURL] [, atlasURL] [, textureXhrSettings] [, atlasXhrSettings]) , the Chrome Develope tool show me: XHRLoader.js:57 GET http://10.10.0.10:8081/assets/jsons/login.json 404 (Not Found) My code is: function Preload() { this.load.atlas('loginAtlas', './assets/images/login.png', './assets/login.json'); } If my code is wrong?
  8. It only show 1 warning: Invalid Phaser State object given. Must contain at least one of the required functions: preload, create, update or render
  9. Excuse me! I have a problem with the game develop. I have 5 states: state1~state5, and every state has preload, create and update 3 function. How should I put them in mounted and methods? In original code: var GameObj = {}; GameObj.Index = function (game) { }; GameObj.Index.prototype = { create: function(){}, update: function(){}, player: function(){} }; And I try to write in VueJS: import 'pixi'; import 'p2'; import Phaser from 'phaser'; export default { name: 'game', props: { height: Number, width: Number, }, mounted() { let self = this; const gameHeight = document.querySelector('#gameBox').offsetHeight; const gameWidth = document.querySelector('#gameBox').offsetWidth; if (this.game === null) { this.game = new Phaser.Game({ width: gameWidth, height: gameHeight, renderer: Phaser.AUTO, parent: this.$el, }); } this.addSate(); }, methods: { addSate() { this.game.state.add('GamePreloader', function() { this.prototype = { preload(Phaser) { ... }, create(phaser) { .... this.game.state.start('GameIndex'); }, }; }); this.game.state.add('GameIndex', function() { this.prototype = { create(phaser) { .... }, memberLogin(phaser) { .... }, }; }); this.game.state.start('GamePreloader'); }, }, data() { return { game: null }; }, }; I don't know if my structure has a fault? Because there is nothing in the canvas to display.