Search the Community

I want to use Browserify with Pixi.js v5, because I want to create a lot of examples for learning and I do not want to use Webpack (Gulp, Grant and so on) because they require a lot of disk space on my laptop. I use TypeScript too. Could you give me a simple project in the archive with a few TypeScript files that allows me to create a bundle for Browser? EDITED: This problem is solved. The solution is in this message

Hi all, I'm the main author of the Quick game engine / lib and I have been reading a lot about these tools such as npm and browserify for the client side of web applications. I have been very comfortable with the current structure of the project but I would like to hear your opinions on adopting the new structure that these tool can facilitate, e.g. separate class files, et al. Coming from Java, I can appreciate that, though it's not a real need. Anyway, I already use npm for unit testing so it feels like it would make sense to go further into this trend. Any comments are more than welcome. Thank you.

Hi everyone, I am currently using Phaser,io with ES6 syntax , gulp, babelify, browserify and browsersync that is something similar to the ES6 boilerplate but I am using my own gulp file. I am encountering a bug where I import an image there is a green square behind it and there is a warning of "Phaser.Cache.getImage: Key "player" not found in Cache." on the Chrome browser debug tool show on the attached image. I have a GameState.js file as so: import Player from "../objects/Player"; class GameState extends Phaser.State { constructor(){ super(); } preload(){ let lander = new Player(this.game,0, 0); lander.loadImage(); } create() { let lander = new Player(this.game,0,0); lander.setSprite(); } } export default GameState; I am importing the image from the Player.js file: import {Images} from "../global"; class Player extends Phaser.Image { constructor(game, x, y, key,frame){ super(game, x, y, key, frame); this.loadImage(); this.setSprite(); } loadImage(){ this.game.load.image("player", Images.lander); } setSprite(){ this.game.add.sprite(10,10,"player"); } } export default Player; the global.js file contains variables like so: var gameScreen = { Width: window.innerWidth, Height: window.innerHeight }; var Images = { lander: '/images/player.png' }; export {gameScreen, Images}; Is there anyway to fix this bug? Thanks

So... I've been trying for days now to get modules to play nice with babylon.js, thus far without success. babelify, webpack, browserify, nothing seems to be working. Can anyone give me a hint on how to properly package it so that it actually functions? The current error I'm running into (and there have been dozens of various errors from the various attempts) is that BABYLON is not defined. require ('./babylon.js');var createScene = require ('./Sub_Scene1.js'); console.log('1');window.addEventListener('DOMContentLoaded', function(){ var canvas = document.getElementById('renderCanvas');var engine = new BABYLON.Engine(canvas, true); console.log('2'); var scene = createScene;engine.runRenderLoop(function(){scene.render();}); window.addEventListener('resize', function() {engine.resize();});});console.log('3');

I'm attempting to get started with Phaser (2.4.0), but whenever I require phaser into my project, I receive this error: Uncaught TypeError: Cannot read property 'prototype' of undefinedat phaser:35790 which refers to this line: Phaser.TileSprite.prototype = Object.create(PIXI.TilingSprite.prototype);Just above this line is the definition for the Phaser.TileSprite class, so the error must be referring to PIXI.TilingSprite.prototype. I've tried manually inserting PIXI into the window object like this: window.PIXI = require("pixi.js");But this does not solve the issue. If anyone else has run into this issue and could tell me what I'm doing wrong, that would be much appreciated. Here's some additional information: Javascript build task (gulp): gulp.task("babel", () => { return browserify("./lib/app.js", {debug: true}) .transform(babelify.configure({ ignore: /node_modules/ })) .bundle() .on("error", function(error) { console.log(`Babel Error: ${error}`); this.emit("end"); // keeps task from hanging on error }) .pipe(fs.createWriteStream("./bin/app.js"));}); dependencies: "devDependencies": { "babel": "^5.8.3", "babel-core": "^5.8.3", "babelify": "^6.1.3", "browserify": "^11.0.0", "browserify-incremental": "^3.0.1", "express": "^4.13.1", "gulp": "^3.9.0", "gulp-ruby-sass": "^1.0.5", "lodash": "^3.10.0"},"dependencies": { "pixi.js": "^3.0.7", "phaser": "^2.4.0"}

I have a game with structure like this. (Some lines of code were deleted. Also all file are required by Browserify) Game needs boot.js and play.js game.js: w = window.innerWidth * window.devicePixelRatio,h = window.innerHeight * window.devicePixelRatio;window.game = new Phaser.Game((h > w) ? h : w, (h > w) ? w : h, Phaser.CANVAS, 'Phaser', {render:render});game.state.add('Boot', require('./states/boot.js'));game.state.add('Play', require('./states/play.js')); boot.js starts play.js In boot.js: module.exports = { preload: function() { //... }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.world.setBounds(0, 0, 6000, 6000); this.game.state.start("Play"); } };play.js requires interfacePanels.js In play.js: chat = require('./../chat.js');interfacePanels = require('./../interfacePanels.js');module.exports = { create: function() { interfacePanels.init(); }, update: function() { //.... }};There is a method that shows profile of a player in interfacePanels.js (also this file requires profile.js) And here is the problem file profile.js: module.exports = { initialized: false, START_X: '', START_Y: '', create: function() { //... some code }, update: function() { console.log('profile') },};And so, update function doesn't work at all I wonder but if I add update function in play.js file there will be a lot if console.log commands Please, I need help) I need this to move elements to starts points and check whether overLap happens or not Thank you in advance!!!

Hey there, I´m starting a not-so-small pixi project, which is also my first pixi project. I downloaded pixi and found that the basic gruntfile setup included in the package is not very helpful. Why is there no simple runnable example included. Flambe (just for example) does a very good job at this point so it´s much easier to start developing than with pixi. The pixi examples are fine but why is there no real-life example like Flambe´s shmup example to really get you started and see best practices by example ... Enough whining ... Is it possible to setup Pixi with browserify in grunt (or without) or what is your approach to molularize your games? All the Tutorials i´ve seen include several js-files in the index.html which I don´t think is a professional approach.

Howdy! I'm a long time lurker, first time contributor. I saw a good number of Phaser template projects when starting to use the framework, however none I saw had all the features I wanted to help ship production ready projects. https://github.com/lukewilde/phaser-js-boilerplate Not wanting to repeat the readme, the distinguishing features include: Jade HTML templatingStylus CSS PreprocessorAsset visioning (No more asking for clients to clear their browser's cache)Includes Lodash, Stats.js, and basic Google Analytics integration out of the boxAlong with a stack of development time nicetiesThe project is still a work in progress so feel free to ask questions, request features, and raise any issues you might find. I hope you find it useful. Let me know what you think Luke

Hi everyone I named this post "Alternatives to organize code base into different files" because it is a more general than "alternatives to make modular code" or something like that. I like javascript a lot, but it being the ONLY LANGUAGE IN THE WORLD that does not have a way to load/reference a file from within another is what pisses me off most. Every language has it. C and C++ has "include", C# has "using", Java has "import" and php has "require" and "require_once". I bet even X86 assembly may have something like that. Nonetheless, javascript yet don't have it and only God knows if (and when) the ecmascript 6 draft that proposes modules like python's will come to really become standard and come the masses. And WHEN it come, will everyone use updated browsers ??? And, when it comes, people will already be familiar with what they are already familiar, like AMD (requirejs style modules) and browserify (commonjs style modules) That being said, I would like to know your experiences and opinions about how (and why) you divide your code base into several files. It seems most use browserify and others use requirejs. But there are still others that just define and use globals into several files and put several script tags in the html. I made an attempt to create what seemed to me the simplest way to emulate a include/import/using/require in javascript, using xmlhttprequest+eval to "include" synchronously one js file into another: https://github.com/Gnumaru/executejs I think the current ecmascript 6 draft propposal for modules is probably the best. But old javascript files meant to just be included in html with a script tag will probably need to be patched to work with the modules system. My solution is just a way to use the "old way" of adding several script tags, without really adding several script tags. I would like to know, then, what you're using to manage large codebases. Are you bundling every js file into one? with what? browserify? requirejs' bundling tool? linux's cat command? If you're not building your code base into one single file, how are you calling one file from anoter? several script tags? AMD (with requirejs or others)? something with commonjs sintax? And at last, independent of bundling your code into one file or not, how the functionality of each file is exposed to other files? by exporting amd style modules? exporting commonjs style modules? defining globals? defining namespaces? The creator of UglifyJS has given some thoughts on this matter wich is really worth reading. http://lisperator.net/blog/thoughts-on-commonjs-requirejs/ He says, for example, that for many years and still today, C programmers are used to define globals using unique names and are happy with it =) (those are not his words, those are my interpretation of his whole blog post) Your experiences and opinions would be really important to me and probably to several other people that may read this thread. Thanks.