Search the Community

Hello,guys! In the old days you remember Flash/AS3. There were free Flashdevelop IDE. It was perfect. You use all libraries in flash with perfect auto-completion, perfect debuging and so on. When flash is old and grumpy now every work with it is stopped of course. The perfect substituent of AS3 + Flashdevelop IDE we explored is Typescript + PIXI + Webstorm + Typescript namespaces - okay. But typescript + webstorm are made for angular applications so you understand there is bunch of problems. We were under pressure and had to create everything fast. Now we have time to explore for the best solution. Big games/applications can be made of pure javascript and it is trash - our opinion and experience. Can you tell your opinions, your experience, best practices and so on on Typescript, PIXI , IDE, other libraries and so on ? Lets make better code!

Hey guys, this is driving me insane. I created a working Angular 2 project using TypeScript and SystemJS. SystemJS couldn't load Phaser properly, so I kept getting errors along the lines of "PIXI is undefined", or "Phaser.Game is not a constructor". I solved those errors by including a reference to Phaser.js inside my index.html file, but now WebStorm can't properly autocomplete Phaser methods because it's no longer recognized as a module, just as a global variable declared inside index.html. Is there a way to properly include the Phaser module using SystemJS, or at least make WebStorm autocomplete Phaser classes and methods?

Hello I use PHPStorm or Webstorm for most projects I do (mostly PHP). I want to try BabylonJS in combination with that software. I follow the tutorial, put an index.html and babylon.2.5.js in the same folder, reference it in a script tag, working like a charm. PHPstorm hints to classes and functions, very cool. But when I want to fill in parameters, I see this: It's something, but not very much. I suspect this is because the babylon.2.5.js file is transpiled from TypeScript. I figured I want to work in TypeScript because that language is nicer imho than Javascript. So again, followed the tutorial. added the d.ts file to my PHPstorm project. That doesn't work at all because PHPStorm cannot find any reference to the BABYLON namespace. So I tried something else, added babylonjs as an external library (apperently someone made that for PHPStorm) but the effect is the same. Is anybody working here with PHPStorm (or webstorm) + TS + BabylonJS and willing to get me started? Thanks!

Hello fellow devs I have used THIS template to create my own project. It all works well, but I am working with WebStorm and I am struggling to create a debug profile. I don't want to use the Google Chrome debug. Any ideas? P.S. I also read something about live mobile debug - is that straight on a device? If so - what kind of setup do I need to make such connection between my IDE and the device? Is it also possible to live-reload only the changes that have been made and not the whole game state?

Friends, greetings to all. Return to Phaser after a while. I'm working with WebStorm and TypeScript. I have a problem with importing a class into a .ts (typescript) file: Import EnemySprite from './classes/EnemySprite'; Translated to javascript: Var EnemySprite_1 = require ( './ classes / EnemySprite'); The require () function is not recognized, so when I run the game I get the following message in the index.html: Uncaught ReferenceError: require is not defined Some help? Thank you!

Hi all, I am working on this game with a friend. We are having an issue when using the phaser-arcade-slopes.min.js. At the point when we go to add the plugin in the create() function it starts loading with a black screen and will then further keep the black screen and nothing seems to happen. We have attempted different statements etc and nothing seems to have worked. If you remove all lines that are commented saying "//Arcade Slopes", the game works perfectly with collision but obviously without the slopes working. The error we get with it when the arcade slopes code is implemented is as follows; Uncaught TypeError: Cannot read property 'x' of undefined(...) It says that this is coming from the phaser.min.js:24. Now if I extend this it takes me further to my JavaScript code which is as follows; var gameFunc = function() {}; var map; var ground; var player; var direction = 'left'; var jumpTimer = 0; var movement; var jumpButton; var bg; gameFunc.prototype = { create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.plugins.add(Phaser.Plugin.ArcadeSlopes); //Arcade Slopes game.physics.arcade.gravity.y = 250; //Arcade Slopes bg = game.add.tileSprite(0, 0, 800, 600, 'background'); bg.fixedToCamera = true; map = game.add.tilemap('level1'); map.addTilesetImage('snow_tiles_32', 'tiles'); ground = map.createLayer('Tile Layer 1'); ground.debug = true; ground.resizeWorld(); //Arcade Slopes game.slopes.convertTilemapLayer(ground, { 1: 'FULL', 2: 'FULL', 3: 'FULL', 4: 'FULL', 5: 'FULL', 6: 'FULL', 7: 'FULL', 8: 'FULL', 9: 'HALF_TOP', 10: 'FULL', 12: 'FULL', 13: 'HALF_BOTTOM_LEFT', 14: 'HALF_BOTTOM_RIGHT', 15: 'HALF_BOTTOM_LEFT' }); //End of Arcade Slopes map.setCollisionBetween(1, 34, true, 'Tile Layer 1'); player = game.add.sprite(32, 32, 'penguin'); game.physics.enable(player, Phaser.Physics.ARCADE); //Arcade Slopes game.physics.arcade.enable(ground); player.body.slopes = {sat: {response: 0}}; //workaround for a phaser bug game.slopes.enable(player); player.body.slopes.preferY = true; //stops the player sliding down slopes //End of Arcade Slopes player.body.bounce.y = 0.2; player.body.collideWorldBounds = true; player.body.setSize(20, 32, 5, 16); player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('turn', [4], 20, true); player.animations.add('right', [5, 6, 7, 8], 10, true); game.slopes.enable(player); //Arcade Slopes game.camera.follow(player); movement = game.input.keyboard.createCursorKeys(); jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); }, update: function() { game.physics.arcade.collide(player, ground); player.body.velocity.x = 0; if (movement.left.isDown) { player.body.velocity.x = -150; if (direction != 'left') { player.animations.play('left'); direction = 'left'; } } else if (movement.right.isDown) { player.body.velocity.x = 150; if (direction != 'right') { player.animations.play('right'); direction = 'right'; } } else { if (direction != 'idle') { player.animations.stop(); if (direction == 'left') { player.frame = 0; } else { player.frame = 5; } direction = 'idle'; } } if (jumpButton.isDown && player.body.onFloor() && game.time.now > jumpTimer) { player.body.velocity.y = -250; jumpTimer = game.time.now + 750; } }, render: function() { game.debug.bodyInfo(player, 32, 32); } }; Now once extended, it says the error is coming from my update function's first line; game.physics.arcade.collide(player, ground); I'm not entirely sure what can be the solution here, I have tried multiple different steps and just making it either worse or nothing at all happens. If anyone can be of any help that would be great! I have posted the HTML (index.html) and the preloadJS.js incase. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="JS/libraries/phaser.min.js"></script> <script type="text/javascript" src="JS/libraries/phaser-arcade-slopes.min.js"></script> <script type="text/javascript" src="JS/preloadJS.js"></script> <script type="text/javascript" src="JS/menuJS.js"></script> <script type="text/javascript" src="JS/level1JS.js"></script> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game'); game.state.add('preloadState', preloadFunc); game.state.add('menuState', menuFunc); game.state.add('gameState', gameFunc); game.state.start('preloadState'); </script> </head> <body> <div id='game'></div> </body> </html> preloadJS.js var preloadFunc = function() {}; preloadFunc.prototype = { preload: function() { this.game.load.tilemap('level1', 'assets/tilemap/tiles.json', null, Phaser.Tilemap.TILED_JSON); this.game.load.image('tiles', 'assets/tiles/snow_tiles_32.png'); this.game.load.spritesheet('penguin', 'assets/sprite/penguin.png', 32, 48, 9); this.game.load.image('ball', 'assets/sprite/ball.png', 30, 20); this.game.load.image('background', 'assets/background/blue.png', 800, 600); }, create: function() { this.game.state.start('gameState'); //Temporary state for testing the game quickly } } Thanks for the help!

I can't understand why this is happening so please help me out. For some reason when i run this program at my home PC it will load a black screen. When I load the exact same files on a PC at my University it will run normally from using those exact files where it DID NOT work at my home PC. If anyone could shed some light into why this error is there and give a fix it would be great. Error: Uncaught TypeError: Cannot read property 'x' of undefined(…) P.s All files included in the ZIP. Test Game Phaser.rar

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?

I'm currently having this issue when I am trying to get a sprite to go up a slope within phaser using the phaser-arcade-slopes.min.js plugin. I am using a .csv tilemap also with a tile size of 32x32. I'm unsure if my names are just incorrect or I am using the wrong type of file for the tilemap itself. I have been getting errors such as - Tilemap.createLayer: Invalid layer ID given: null & Cannot read property 'resizeWorld' of undefined(…). Any help would be much appreciated. "snow_tiles_32.png" is the name of the tileset I created and I'm using "tiles.csv" the tilemap created inside Tiled. I've also included a .rar file of everything to do with the game if anyone decides to take a further look into this issue. HTML var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { this.game.load.tilemap('tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV); this.game.load.spritesheet('tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32); this.game.load.spritesheet('player', 'assets/penguin.png', 32,48); } var player; var cursors; function create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.plugins.add(Phaser.Plugin.ArcadeSlopes); cursors = game.input.keyboard.createCursorKeys(); this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('snow_tiles_32', 'tiles'); this.game.stage.backgroundColor = '#80e3ff'; this.ground = this.map.createLayer('collision'); this.ground.resizeWorld(); this.game.slopes.convertTilemapLayer(this.ground,{ 2: 'FULL', 3: 'HALF_BOTTOM_LEFT', 4: 'HALF_BOTTOM_RIGHT', 6: 'HALF_TOP_LEFT', 5: 'HALF_TOP_RIGHT', 15: 'QUARTER_BOTTOM_LEFT_LOW', 16: 'QUARTER_BOTTOM_RIGHT_LOW', 17: 'QUARTER_TOP_RIGHT_LOW', 18: 'QUARTER_TOP_LEFT_LOW', 19: 'QUARTER_BOTTOM_LEFT_HIGH', 20: 'QUARTER_BOTTOM_RIGHT_HIGH', 21: 'QUARTER_TOP_RIGHT_HIGH', 22: 'QUARTER_TOP_LEFT_HIGH', 23: 'QUARTER_LEFT_BOTTOM_HIGH', 24: 'QUARTER_RIGHT_BOTTOM_HIGH', 25: 'QUARTER_RIGHT_TOP_LOW', 26: 'QUARTER_LEFT_TOP_LOW', 27: 'QUARTER_LEFT_BOTTOM_LOW', 28: 'QUARTER_RIGHT_BOTTOM_LOW', 29: 'QUARTER_RIGHT_TOP_HIGH', 30: 'QUARTER_LEFT_TOP_HIGH', 31: 'HALF_BOTTOM', 32: 'HALF_RIGHT', 33: 'HALF_TOP', 34: 'HALF_LEFT' }); this.map.setCollisionBetween(2,34, true, 'collision'); //player this.player = this.game.add.sprite(100,50,'player'); this.game.physics.arcade.enable(player); this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 2000; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true); this.game.slopes.enable(this.player); this.game.camera.follow(this.player); } function update() { this.game.physics.arcade.collide(this.player, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150; this.player.animations.play('right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && player.body.onFloor()){ this.player.body.velocity.y = -350; } } Test Game Phaser.rar

I am having issues making webstorm to work with phaser.io. I have made an empty project, created an html5 (index.html) file. I added the phaser.js and app.ts (basically app.js) to the index.html. I also added the ts files for phaser to work in typescript (phaser.d.ts, pixi.d.ts, and so on). When I try to edit app.ts, it says it cannot find phaser.js but it finds phaser.d.ts fine. When i load it anyways, it cannot find package.json. I know my typescript is working properly because it generates an js file where the ts file is located. How do i make phaser to work with webstorm? I have looked on the part for webstorm section and it only has a little blerp about webstorm is a good choice for phaser. I want to get into phaser.io game development but I cannot because I have no idea how to make it work. I looked online for videos and their was one but he didn't really show how to add phaser to webstorm properly. Any help on this would be helpful. -Shmelly

Can you please take a look at this code and explain to me what is wrong? From what I know, it should work.. Or at least calling a function from create() could work :-) Thank you! /// <reference path="phaser/phaser.d.ts" />class SimpleGame { logo: Phaser.Sprite; game: Phaser.Game; constructor() { this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update }); console.log("BEFORE"); this.titleClicked(); console.log("after"); //this.animateLogo(); // >>> Uncaught TypeError: Cannot read property 'scale' of undefined } preload() { this.game.load.image('logo', 'assets/images/phaser2.png'); } titleClicked(){ console.log("CLICKED"); this.titleClicked2(); } titleClicked2(){ console.log("CLICKED 2"); } create() { this.logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo'); this.logo.anchor.setTo(0.5,0.5); console.log("CREATED"); // this.titleClicked(); // >>> Uncaught TypeError: undefined is not a function // this.logo.events.onInputDown.add(this.titleClicked, this); // >>> Uncaught TypeError: Cannot read property 'add' of null //this.animateLogo(); // >>> Uncaught TypeError: undefined is not a function } update() { } animateLogo(){ this.logo.scale.setTo(0.5,0.5); var logoTween = this.game.add.tween(this.logo.scale); logoTween.to({ x: 1, y: 1 }, 2000, Phaser.Easing.Bounce.Out, true); }}window.onload = () => { var game = new SimpleGame();};