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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 14 results

  1. 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?
  2. 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...
  3. 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)!
  4. 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 ([email protected]', [email protected]', etc). Supports automatic loading of compressed textures (PVRTC, S3TC, ETC1).
  5. 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
  6. plugin

    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.
  7. 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
  8. 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.
  9. 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?
  10. Hi all, Recently I'm trying to build my Phaser project with webpack. However I have tried for a long time and still cannot get it to work. I followed the instructions on this URL : https://www.npmjs.com/package/phaser As the Webpack instruction mentioned, I added p2 as a dependency, and did the webpack configuration like this : var path = require('path'); var webpack = require('webpack'); var phaserModule = path.join(__dirname, '/node_modules/phaser/'); var phaser = path.join(phaserModule, 'build/custom/phaser-split.js'), pixi = path.join(phaserModule, 'build/custom/pixi.js'), p2 = path.join(phaserModule, 'build/custom/p2.js'); module.exports = { entry: './main.js', output: { path: __dirname , filename: 'bundle.js' }, module: { loaders: [ { test: /pixi.js/, loader: "script" }, ] }, resolve: { alias: { 'phaser': phaser, 'pixi.js': pixi, 'p2': p2, } } }; And for my main.js : require('pixi.js'); require('p2'); require('phaser'); var game = new Phaser.Game(480, 320, Phaser.AUTO, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function update() {} After I compiled with webpack and open the browser, I'm getting error : Uncaught ReferenceError: p2 is not defined Did I do anything wrong here? Then I tried to add this in loaders : { test: /p2.js/, loader: "script" } And Now when I compile the files, open the browser and get this Error : bundle.js:53 Uncaught ReferenceError: Phaser is not defined I am new to webpack and not sure what did I do wrong on the whole configuration stuff. Really appreciate it if some could help me. Thanks! @rich
  11. Hey guys, I have decided to start using webpack and ES6 with my games, I have managed to run a sample with 'npm start', however I am unable to debug it in WebStorm. I am using the example here: https://github.com/SvetoslavKuzmanov/phaser-game-boilerplate This is my debug configuration in the image. I would like to use npm directly from WebStorm and be able to debug my code with preview in the browser. Also I have heard that it is possible to have live editing set up, so my code changes will appear immediately in the browser. Has anyone done that?
  12. Hi Everyone! I work for a developer found and run firm here in Massachusetts. We're currently looking to add one/two HTML5 developers to our current team. You would be working on a SaaS based, interactive, educational gaming platform. Engineers always talk to me about “wanting to feel like they are a part of something meaningful or building something meaningful.” How about using cutting edge technologies you're passionate about, and delivering on a product that 50,000 students will use/adopt every day and around 30 million students around the world will use every year. Certainly an amazing opportunity where you would join a small "SWAT Style" team of passionate, results-driven, engineers. In an effort to design and develop code that delivers rich experiences using HTML5, JavaScript, CSS, and related frameworks on desktop browsers, mobile browsers, and mobile app's. Work that will be viewed by millions and millions of students around the world. Ultimately your work will lead to higher learning outcomes and better experiences in the classroom. The impact you’ll have: • Write code, built tests, participate in design and code reviews with fellow developers • Work with a team of editors, animators, and product owners to understand requirements and deliver technology using Agile software development methodologies • Build quality software in an Agile (Scrum) environment • Design and develop applications and games in HTML5 and JavaScript, with a focus on Canvas-based experiences What we’re looking for: • The ability to thrive in a fast, dynamic environment and a demonstrated record of previous achievement • Bachelor’s degree in Computer Science or a related field (or equivalent experience) • Experience with JavaScript toolchain, from build system to automated testing • Experience with CreateJS/ReactJS OR experience with HowlerJS/EaselJS. • Experience producing and shipping at least one or more applications for desktop or mobile • Strong knowledge of JavaScript, HTML, CSS, DOM, AJAX, RestfulAPI • Experience with Agile processes
  13. Hi, just started working on my first Bablyon project. I'm planning a client/server model that will share some code between Node and the browser. I've encountered a couple of pain points, and noticed there is no issues section on GitHub, so I'm guessing this is the proper place to discuss with devs? The first is pretty major, the npm module uses a minified version of the source as its entry point, which is excruciating to debug! It's impossible to set breakpoints or sometimes to even work out which function is failing. Ideally the project would be distributed as unminified JavaScript that includes source maps. There is no reason to minify code for npm since it will ultimately be handled by the user's build tool (in production only!). The other problem is that I'd like to use the `Vector3` class (and perhaps others) in my server code. To do so I must "pretend" that `window` and `navigator` exist in the global scope. global.window = {}; global.navigator = {}; import { Vector3 } from 'babylonjs'; Ideally I'd like to do something like this: import { Vector3 } from 'babylonjs/Math'; That is not possible since the unminified source is not supplied in the package, and if I understand correctly, does not use the node module system anyway. Since the file `babylon/src/Math` actually doesn't require access to `window` etc. this should be fine. It could potentially make sense to split `Vector3` into its own repo and have it as a dependency of babylon? Is there any interest or discussion in this area? How do other people debug the minified code?
  14. 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