Search the Community

Showing results for tags 'phaser-input'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 2 results

  1. Hello everyone! TLDR; I'm trying to get the plugin 'phaser-input' (made by Orange Games) to be loaded and running properly in a webpack + ES6 style environment. I'm fairly new to the phaser game dev environment, and I really like how someone has created a boilerplate project that has ES6 style coding enabled [ phaser-es6-webpack]. But I think phaser2 by default was never meant to be coded in this style, with importing dependencies from a package manager; you are suppose to load the library and any plugins in the index.html's header area via script tags, so that it can do it's thing with the global namespace. (I didn't realize this until I got too far ahead in development) In my project, I have added to the webpack.config.js file to make the plugin 'phaser-input' ES6 compatible, and importable into my project. // webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // Phaser webpack config const phaserModule = path.join(__dirname, '/node_modules/phaser-ce/'); const phaser = path.join(phaserModule, 'build/custom/phaser-split.js'); const pixi = path.join(phaserModule, 'build/custom/pixi.js'); const p2 = path.join(phaserModule, 'build/custom/p2.js'); const phaserInput = path.join(__dirname, '/node_modules/@orange-games/phaser-input/build/phaser-input.js'); module.exports = { mode: 'development', entry: { app: ['babel-polyfill', path.resolve(__dirname, 'client/src/main.js')], vendor: ['pixi', 'p2', 'phaser', 'phaser-input', 'webfontloader'], }, output: { pathinfo: true, path: path.resolve(__dirname, 'client/build/js'), publicPath: './js', filename: '[name].js', }, devServer: { contentBase: path.resolve(__dirname, 'client'), }, watch: true, plugins: [ new HtmlWebpackPlugin({ filename: '../index.html', template: './client/src/index.html', chunks: ['vendor', 'app'], chunksSortMode: 'manual', minify: { removeAttributeQuotes: false, collapseWhitespace: false, html5: false, minifyCSS: false, minifyJS: false, minifyURLs: false, removeComments: false, removeEmptyAttributes: false, }, // hash: false, }), ], module: { rules: [ { test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'client/src') }, { test: /pixi\.js/, use: ['expose-loader?PIXI'] }, { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] }, { test: /p2\.js/, use: ['expose-loader?p2'] }, { test: /phaser-input\.js$/, use: ['exports-loader?PhaserInput=true'] }, ], }, node: { fs: 'empty', net: 'empty', tls: 'empty', }, resolve: { alias: { phaser, pixi, p2, 'phaser-input': phaserInput, }, }, }; The documentation recommends that the plugin be added using [ game.add.plugin(PhaserInput.Plugin); ] But I've seen other plugins use [ game.plugins.add(PhaserInput.Plugin) ]. I have this snipped added to my game state file. (the other code has been removed for clarity) import Phaser from 'phaser-ce'; import PhaserInput from '@orange-games/phaser-input/build/phaser-input'; export default class Game extends Phaser.State { preload() { this.game.plugins.add(PhaserInput.Plugin); } } The documentation simply shows the use of the plugin using the snipped [ var input = game.add.inputField(10, 90); ]. Where the function 'inputField' has been added to the framework. This is where I get stuck, the plugin function (inputField) that is suppose to be added never actually gets added at all to [ game.add ]. This in results in an error. import Phaser from 'phaser-ce'; export default class FormOverlay extends Phaser.Group { constructor({ game }) { super(game); this.testInput = game.add.inputField(10, 90); } } Is there a proper way of loading plugins in this webpack + ES6 style? I've wasted an afternoon trying to figure out how to get this plugin to work, I must be missing something here. If you know the answer to this issues, I would greatly appreciate if you can share the answer. Thanks for reading!
  2. Hi guys, I have created some input fields in the DOM and I place them above my phaser game with css. In my game I use game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; so I use media queries to control the position of the input fields. I do it like this => #inputs { position: absolute; top: 30%; left: 40%; width:100%; } @media only screen and (max-width: 560px) { #inputs{ top: 35%; left: 20%; transform: scale(0.8,0.8); } } But it is almost impossible to follow the Phaser scaling!If you have any tips, please share!