Search the Community

Showing results for tags 'webpack'.



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 29 results

  1. Hey Folks, I hope you can help. I am fairly new to Phaser 3 and am currently working on a platformer where my character can run, jump and collect collectibles. My game is modularised through WebPack everything else is plain JS along with the Phaser 3 framework. I am using Tiled where I export my levels as json files and the initial level loads perfectly with all collision tiles in place and working as expected. I've hit a road block with loading/starting new levels. I'll try and explain with my code to clarify. I've reduce the code significantly to make it easier to read. main.js: Entry file // Main.js import 'phaser'; import { Cave } from 'scenes/cave'; import { Playground } from 'scenes/playground'; var config = {...}, scene: [Cave,Playground] }; var game = new Phaser.Game(config); Cave.js. For the sake of conciseness, I've placed the this.scene.start in the update function so the new scene initialisation happens immediately. MapSetup function is further down. // Cave.js import 'phaser'; import MapSetup from 'modules/map-setup.js'; import CollectibleSetup from 'modules/collectible-setup.js'; const mapSetup = new MapSetup(); const collectibleSetup = new CollectibleSetup(); export class Cave extends Phaser.Scene { constructor () {super('Cave')} preload() { this.load.tilemapTiledJSON('map', 'assets/levels/cave/cave.json');// map made with Tiled in JSON format this.load.spritesheet('cave', 'assets/levels/cave/cave.png', {frameWidth: 64, frameHeight: 64});// tiles in spritesheet } create() { // Setup up map for this scene/level var mapObj = mapSetup.sceneMap(this, 'map', 'cave', 'world') this.map = mapObj.map; this.physics.add.overlap(this.player, this.stars, collectibleSetup.collectStar, null, this); }// create update () { this.scene.start('Playground') } Playground.js // Playground.js export class Playground extends Phaser.Scene { constructor () {super('Playground')} preload() { this.load.tilemapTiledJSON('map', 'assets/levels/playground/map.json');// map made with Tiled in JSON format this.load.spritesheet('tiles', 'assets/levels/playground/tiles.png', {frameWidth: 70, frameHeight: 70});// tiles in spritesheet } create() { // Setup up map for this scene/level var mapObj = mapSetup.sceneMap(this, 'map', 'tiles', 'World') this.map = mapObj.map; this.physics.add.overlap(this.player, this.stars, collectibleSetup.collectStar, null, this); }// create } MapSetup.js. The issue occurs here when the PlayGround scene is initiated. import 'phaser'; export default class MapSetup { sceneMap (ctx, key, tileSetImage, dynamicLayer) { // Map var map = ctx.make.tilemap({key: key}); console.log('map',map) // tiles for the ground layer - tilesets.name` var groundTiles = map.addTilesetImage(tileSetImage); // create the ground layer - layers[i].name var groundLayer = map.createDynamicLayer(dynamicLayer, groundTiles, 0, 0); // the player will collide with this layer groundLayer.setCollisionByExclusion([-1]); // set the boundaries of our game world ctx.physics.world.bounds.width = groundLayer.width; ctx.physics.world.bounds.height = groundLayer.height; return {map:map, groundTiles:groundTiles, groundLayer:groundLayer} } } I'll try and explain the issue as I understand it. When Playground is initiated, the following error fires in the console and it's because the the groundTiles & groundLayer variables return null so the setCollisionByExclusion doesn't work. When I console.log the map variable that get's assigned in the sceneMap function it returns: The tileset name is still referencing the cave json object and not the playground one. I don't understand why that is. My understanding is that a scene is automatically stopped when a new scene is started and that each scene is it's own class so i'm a bit baffled as to why previous references are still in place. What am I missing? Any help would be much appreciated. Thanks, All Moe
  2. Hi, I'm taking a rather big bite here since I haven't really used TypeScript before, and I have very limited experience with JS and node in general. So I'm not really sure where the fault lies, but I'm pretty sure it's something stupid easy. The problem I have is this: Uncaught TypeError: Cannot read property '_environmentBRDFTexture' of undefined at Function.e.GetEnvironmentBRDFTexture (babylon.js:1) at t [as constructor] (babylon.js:1) at t [as constructor] (babylon.js:1) at new t (babylon.js:1) at t.Creation.createMaterial (Creation.ts:28) This error appears any time I try to create a new PBR material - happens with any PBR material. Specific line from where the error originates is simply this: var material: PBRMetallicRoughnessMaterial = new PBRMetallicRoughnessMaterial(name,GLOBAL.scene); StandardMaterial works just fine. I am using webpack with ts-loader to bundle the JS, as well as TypeScript Compiler, for verification only. My webpack.config.js is pretty much copy-paste from the docs: const path = require('path'); module.exports = { entry: { app: './src/game.ts' }, output: { path: path.resolve(__dirname, 'build'), filename: 'game.js' }, resolve: { extensions: ['.ts', '.tsx', '.js'] }, devtool: 'source-map', plugins: [ ], module: { rules: [{ test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ }] } } And this is my tsconfig.json: { "compilerOptions": { /* Basic Options */ "target": "es5", "module": "commonjs", "noResolve": false, "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "sourceMap": true, "experimentalDecorators": true, "isolatedModules": false, "lib": [ "dom", "es2015.promise", "es5" ], "declaration": true, "outDir": "./tscverify", "strict": true, "types": [ "babylonjs", "babylonjs-gui", "babylonjs-materials" ], } } Help?
  3. here's the GitHub repo. Highlights dev server with live-reload and auto port finder simple SHOW_ALL style stretch mode Auto spritesheet with spritesmith Image optimization on build streamlined assets loading modular development setup Inside full Making your first Phaser 3 game made into modular code. All feedbacks are welcome.
  4. SunOfABeach

    Vue + Phaser 3 Webpack boilerplate

    I created a Webpack template that sets up a Vue project with Phaser 3 integration. It's really minimal but can get people started. Feel free to hit me with suggestions. https://github.com/Sun0fABeach/vue-phaser3 Cheers
  5. mcolman

    Phaser Manifest Loader

    Hi all, I have just released Phaser Manifest Loader for those using webpack. I've been using this code in production for a while now, it makes it super easy to load assets via a simple manifest. Check it out! https://github.com/mattcolman/phaser-manifest-loader Cheers, Matt.
  6. How do you configure the server for this template ? => https://github.com/nkholski/phaser3-es6-webpack I'm trying to do it by following this tutorial => https://gamedevacademy.org/create-a-basic-multiplayer-game-in-phaser-3-with-socket-io-part-1/?a=13 I added two dependencies: nodemon and express. I created the server.js file with the server configuration. const express = require('express') const app = express() const server = require('http').Server(app) const path = require('path') app.get('/', function(req, res) { res.sendFile(path.resolve('index.html')) }) server.listen(8081, function() { console.log(`Listening on ${server.address().port}`) }) In the package.json file, I added a command to start the server: nodemon src/server/server.js The server starts correctly but the indicated html file can not read the scripts (" The load failed for the "script" element with the source vendor.js and app.js"). Project structure:
  7. Hello, I'm just getting started with babylon.js. I've used node on the backend before, but I'm new to using it on the frontend with webpack, it's also my first time using typescript. I'm using Visual Studio Code as my IDE. I'm looking for tips for creating a development environment that will allow fast, iterative development. I'm aware that TypeScript involves transpiling, so perhaps it's not quite a "hot reload", but "pretty quick reload" would be great. In addition, I sometimes work offline, so everything needs to be able to run locally. At the moment I just have a super simple scene for testing purposes, held in a single `main.ts` file. Everything builds and runs as it should, but the build process can be very slow. I have a few questions In particular, the step that can take a minute or so is `92% chunk asset optimization UglifyJSPlugin`. I'm not sure what is running UglifyJS, it's not something I've specified in my build steps. Is it possible to disable it for non-production builds? (not that I've got as far as setting up anything like environment variables). Given that my `main.ts` is so simple, it feels like it must be running uglify on the whole of babylonjs. Is it possible to just transpile the files that have been changed? Is it really necessary with the webpack workflow to bundle everything into a single file? (I thought that if a user was navigating between several sites using babylonjs, the browser might cache babylonjs? Wouldn't it bundling everything into a single file block this caching)? Any other tips for speeding up builds/ creating a nice, speedy dev environment? webpack.config.js: const path = require('path') module.exports = { entry: { 'project': './src/main.ts' }, output: { filename: '[name].js' }, resolve: { extensions: ['.ts', '.tsx', '.js'] }, devtool: 'source-map', plugins: [ ], externals: { oimo: 'OIMO', //why do I need to declare this as external if it's included with the npm install? cannon: 'CANNON', //or true earcut: 'EARCUT' }, module: { rules: [{ test: /\.tsx?$/, include: path.resolve(__dirname, "src"), loader: 'awesome-typescript-loader', // I've tried ts-loader too exclude: /node_modules/ }] } } tsconfig.json: { "compilerOptions": { "target": "es6", "module": "commonjs", "noImplicitAny": true, "sourceMap": true, "outDir": "app", "types": [ "babylonjs" ] }, "include": [ "src/**/*" ], "exclude": [ "node_modules" ] } package.json { "name": "babylondemo", "version": "1.0.0", "description": "", "main": "main.ts", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --progress -p", "watch": "webpack --progress --watch" }, "author": "", "license": "ISC", "dependencies": { "babylonjs": "^3.2.0", "babylonjs-loaders": "^3.2.0" }, "devDependencies": { "awesome-typescript-loader": "^5.0.0", "typescript": "^2.8.3", "webpack": "^4.8.3", "webpack-cli": "^2.1.3" } }
  8. kenneth12

    [WIP] Phaser Puzzle Bobble

    Hello everyone this is my first post on this forum. I wanted to share the Puzzle Bobble clone (gameboy version) I made with Phaser, ES6, and webpack. I tried to make the stages similar to the original series. Currently there is a total of 50 stages but I plan to add the rest of the stages if I can find them on the internet. I also drew all the sprites in photoshop. Hope you guys enjoy it! https://html5bubbleshooter.co/
  9. 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!
  10. mcolman

    bitmap text and webpack

    Hi, I'm trying to use bitmap text with my webpack set up. Webpack changes the filenames of my assets which causes problems with pixi. When you load an xml file through pixi it tries to then parse bitmap text assuming that the png has the same name as the xml. In my case this is not true, so I'd like to parse the bitmap text myself (which pixi allows). But then how do I load the xml file? Again, if I use pixi it will try to do this automatically and fail (with errors). I also don't quite understand how ppl are using this automatic system that relies on the names of the xml and png being the same. If you don't hash your file names, then when you change that bitmap font, the user may grab the xml from the browser cache and load in the new png which will result in some weird looking text. So what method are you using to break the cache when you upload new assets? Maybe you can add query strings to the assets instead? Thanks!
  11. Hi guys, I was looking for a Phaser boilerplate, simple, clean to get me started but what I've found on the web was outdated, too complex or didn't do the right thing (at least for me) so I've decided to create my own. The Phaser boilerplate that I've put together comes with: - the latest version of Phaser CE 2.9.4 - TypeScript - Howler.js 2.0.7 (an awesome audio library) - can be removed if one does not need it - Webpack 3.10.0 - ... and few things to get a game up and running in no time Some of the awesome features: There is a integrated TypeScript linter that checks your code for readability, maintainability, and functionality errors (we need to code proper ). The code is watched so any change you make the browser refreshes (unless you have errors in your code). I've added a command to pack your code (minify, uglify, comments removal, console.log removals, etc). The uglify process is only applied on your custom code, not on vendor library so that you won't end up with extra MBs in your final build. The boilerplate is available here: https://github.com/numbofathma/phaser-typescript-webpack Let me know what you think! Hope it will be useful for the community!
  12. Hi everyone, I've been working on a pixi.js - typescript boilerplate using webpack that I would like to share just in case someone finds it of any use. It comes with a helper class to manage some "trivial" tasks such as resizing, stage alignment, toggling full-screen and some utilities like fps-meter and a container to display some visual info. It's a bit heavy on dependencies though. https://github.com/dacaher/pixijs-ts-boilerplate Any suggestion, bug report or improvement submitted would be very much appreciated. Thanks!
  13. udia

    Phaser/Cordova/Webpack(ES6)

    I created a quickstart application that I hope would be useful to some of you. It is a Phaser 2.8.8 quick start application that incorporates Webpack (ES6), and Cordova. It supports iOS and Android out of the box, along with all default Phaser supported web browsers. https://github.com/udia-software/phaser-cordova-es6 The code is on Github and is licensed under Apache V2. Enjoy!
  14. I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds. I'm using Phaser webpack example template (https://github.com/photonstorm/phaser-ce/tree/master/resources/Project Templates/Webpack) and an example from the website (https://phaser.io/examples/v2/p2-physics/pick-up-object). The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide. The game code is simple and you can check it here: /** * Import Phaser dependencies using `expose-loader`. * This makes then available globally and it's something required by Phaser. * The order matters since Phaser needs them available before it is imported. */ import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js'; import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js'; import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js'; var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png'); game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png'); game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png'); game.load.physics('physicsData', 'assets/physics/sprites.json'); } var tetris1; var tetris2; var tetris3; var mouseBody; var mouseConstraint; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 1000; tetris1 = game.add.sprite(300, 100, 'tetrisblock1'); tetris2 = game.add.sprite(375, 200, 'tetrisblock2'); tetris3 = game.add.sprite(450, 300, 'tetrisblock3'); // Create collision group for the blocks var blockCollisionGroup = game.physics.p2.createCollisionGroup(); // This part is vital if you want the objects with their own collision groups to still collide with the world bounds // (which we do) - what this does is adjust the bounds to use its own collision group. game.physics.p2.updateBoundsCollisionGroup(); // Enable the physics bodies on all the sprites game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false); tetris1.body.clearShapes(); tetris1.body.loadPolygon('physicsData', 'tetrisblock1'); tetris1.body.setCollisionGroup(blockCollisionGroup); tetris1.body.collides([blockCollisionGroup]); tetris2.body.clearShapes(); tetris2.body.loadPolygon('physicsData', 'tetrisblock2'); tetris2.body.setCollisionGroup(blockCollisionGroup); tetris2.body.collides([blockCollisionGroup]); tetris3.body.clearShapes(); tetris3.body.loadPolygon('physicsData', 'tetrisblock3'); tetris3.body.setCollisionGroup(blockCollisionGroup); tetris3.body.collides([blockCollisionGroup]); // create physics body for mouse which we will use for dragging clicked bodies mouseBody = new p2.Body(); game.physics.p2.world.addBody(mouseBody); // attach pointer events game.input.onDown.add(click, this); game.input.onUp.add(release, this); game.input.addMoveCallback(move, this); } function click(pointer) { var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]); // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)]; if (bodies.length) { var clickedBody = bodies[0]; var localPointInBody = [0, 0]; // this function takes physicsPos and coverts it to the body's local coordinate system clickedBody.toLocalFrame(localPointInBody, physicsPos); // use a revoluteContraint to attach mouseBody to the clicked body mouseConstraint = this.game.physics.p2.createRevoluteConstraint(mouseBody, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]); } } function release() { // remove constraint from object's body game.physics.p2.removeConstraint(mouseConstraint); } function move(pointer) { // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x); mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y); } function update() { } function render() { // game.debug.text(result, 32, 32); } If you need to have a look at the project, you can check it here: https://github.com/alexZalachenko/Phaser-Webpack Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  15. Hi, I've recently started making my new (first) game. I decided to go with ThreeJS and A-frame as framework/engine but these aren't very well prepared for game development (lack features I need) so I've switched to BabylonJS. But with my UI being created in Vue (worked well with A-frame HTML elements) there isn't any advice in Google. I've tried integrating it with my Vue component but in a console it says : I thought it is because of Canvas isn't the correct element by when I tried to log it, it prints it is. I don't know if this integration is even possible. As I said I'm new to BabylonJS and maybe I lack some knowledge.
  16. CorayThan

    Phaser + Typescript issue

    I've got an issue with phaser and Typescript where my classes that extend Phaser classes aren't recognizing the Phaser class fields. I posted a pretty detailed stackoverflow question about it, but was wondering if anyone on here might have a suggestion. Feel free to reply here or there. Here's the details: https://stackoverflow.com/questions/45091893/cannot-access-base-class-properties-in-typescript/45100163#45100163
  17. Hi, Someone have tried to use LegacyPbrMaterial with webpack? I copied file babylon.legacyPbrMaterial.min.js and made import in project (import "babylonjs/babylon.legacyPbrMaterial") but after that I get error Uncaught ReferenceError: __extends is not defined at babylon.legacyPbrMaterial.js:1 at BABYLON (babylon.legacyPbrMaterial.js:1) at Object.exports.byteLength (babylon.legacyPbrMaterial.js:2) at __webpack_require__ (bootstrap 3ce2b0a…:19) I have same erro if i try ti use inpsector. I am missing some config for webpack or typescript?
  18. I am struggling with a similar problem like in this thread, but the solution provided here seems not so ideal... I have many modules in my game, and if I use Babylon.js in any of those, I import it using: import Babylon from 'babylonjs' So there isn't any good way to include Canvas2D similarly? I understand it is somehow baked to Babylon.js, but how do I use it? I'm downloading all the dependencies from the npm, including Babylon.js. Then I bundle everything using Webpack. Ideally, I would like to use Canvas2D (for example) like this: import Babylon from 'babylonjs' import Canvas2D from 'babylonjs' Please help, I've been scratching my head for hours now...
  19. I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my github.io link as a base starting point for creating games with Phaser using TypeScript taking advantage of the Phaser npm module and Webpack for building (which I couldn't find a template for, so I made one). It includes the typical 3 states (boot, preloader, title) to show the flow of a Phaser game. It also includes a watch task that watches the project for any changes and recompiles, and another task to run a live server that refreshes automatically after a build. It only takes a few seconds and a couple commands to get going (after having node.js installed)! It's platform agnostic (I've tested on OSX, Ubuntu running on a Chromebook, and Windows 10 in a VM running on OSX and had zero difference in behaviour). Hopefully someone here will find it useful, or at least take a look and let me know how to improve it (I plan on using this template and it's evolutions for all my future Phaser projects)!
  20. GoldFire

    Phaser Webpack Loader Plugin

    I first started by writing a Phaser boilerplate using ES6 and Webpack. However, the thing missing was simple asset loading through Webpack, so I wrote a new plugin to facilitate that along with some more advanced features like compressed textures and retina graphics. Just define your asset manifest file, add the plugin and you are done. Github/Docs | NPM Load all game assets in parallel. Load images, spritesheets, atlases, audio, bitmap fonts and web fonts. Integrated with Webpack for automatic cache-busting. Supports all filetypes. Supports asset postfix for retina support ('@2x', '@3x', etc). Supports automatic loading of compressed textures (PVRTC, S3TC, ETC1).
  21. Hi, Since the problem took me over a week to figure out, here is my solution to bundle your project using web-pack keeping Babylon as a dependency. NB: I am not certain what are the NECESSARY steps (ie what I could simplify) but those are SUFFICIENT steps. My constraints were : The final bundle can be imported both in the browser and in node using any kind of import method : require(), import/export, or <script src=...> tags It has to protect against errors in node due to access to window or document that will be undefined BABYLON has to load has a global in the browser using the script tag (window.BABYLON) BABYLON needs to include Canvas2D BABYLON needs to remain external of the bundle so the custom library is light and in theory could load any version of BABYLON Solution to protect loading in node.js: Build a custom bundle on Babylon website with Canvas2D ONLY, un-minified, and WITHOUT OIMO OR HANDJS. I did not test all possibilities but since the bundle is a concatenation suppose to be web compatible only, the exports will break in webpack or node in general. But using only this custom version will produce bugs in node due to access to undefined window. Then I had to bundle this custom build using webpack, you can see the configuration of webpack and the builder.js here : https://github.com/albertbuchard/experiment-babylon-js.git The important thing here is how the builder checks for window being defined and the webpack config exporting your named library with UMD. Publish this bundle to NPM (in the github look at the package.json it has three scripts to produce a unminified version, a minified version, and publish the repo on npm) Those two steps will allow to load Babylon using any kind of import method, and do not produce errors in node (but returns an empty object, of course any call to BABYLON function will fail) Solution to keep Babylon as a dependency in your custom library: In your library npm install the-custom-babylon-we-just-built Import BABYLON in your scripts any way you want using this custom repo ( es6 import syntax will work <3 ) i.e import BABYLON from 'the-custom-babylon-we-just-built' Then take a look at the webpack config and builder.js of this repo to understand how to manage EXTERNALS: https://github.com/albertbuchard/Experiment.js The key element here is how you write your external array: externals: { ... lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_', }, ... 'experiment-babylon-js': { commonjs: 'experiment-babylon-js', commonjs2: 'experiment-babylon-js', amd: 'experiment-babylon-js', root: 'BABYLON', }, ... 'experiment-babylon-js/lib/babylon.custom.js': { commonjs: 'experiment-babylon-js/lib/babylon.custom.js', commonjs2: 'experiment-babylon-js/lib/babylon.custom.js', amd: 'experiment-babylon-js/lib/babylon.custom.js', root: 'BABYLON', }, }, All but the root (Global environment reference) must be the NAME OF OUR MODULE as you would import it using require('NAME OF YOUR MODULE') so usually the name of your npm folder like the first two exaple, OR the direct path to the file you want to load like the third example. It has to be the same as the import names you are using in your library. So if you import babylon like so : // in your library const BABYLON = require('./path/to/babylon.js') // in your webpack config externals: { ... './path/to/babylon.js': { commonjs: './path/to/babylon.js', commonjs2: './path/to/babylon.js', amd: './path/to/babylon.js', root: 'BABYLON' } ... } Hope it will help some of you ! @Nikos123
  22. lean

    Phaser + ES6 + Webpack.

    I've created a boilerplate for Phaser + ES6 + Webpack. Features: JavaScript Standard Style Next generation of Javascript Webpack ready Multiple browser testing Responsive utilities! Feel free to use and improve! https://github.com/lean/phaser-es6-webpack
  23. I am writing games in Phaser using webpack for building deployment versions and running hot reload server for development and i am using karma for testing. I am new to most of those technologies so i am open to critique but if someone looks for starting point for connecting Phaser with those technologies i have made git repo that maybe is good starting point to start building your own projects: https://github.com/Xesenix/game-webpack-react-phaser-scaffold If you are more advanced at using such an environment for developing phaser games I would appreciate advices what i can fix with it
  24. Dear all Now I am trying to include ninja physics in my phaser build, I tried putting the custom build in the build files and then requiring it in webpack.config file instead of requiring the original phaser build, but that didn't work, so how can I use custom phaser build with webpack ? Thanks in advance <3.
  25. royibernthal

    Webpack or not?

    So far I've been developing my project using TypeScript and simply compiling it into JavaScript via VS Code. Is there any good reason for me to migrate to Webpack? Will it positively affect the code or structure in any way?