Search the Community

Hello all - I have started working on my first browser-based game and I got the Phaser framework set up with Angular and Electron for this, as I'm super comfortable with Angular and enjoy playing with typescript. I started to build it and realized that getting these frameworks to play well together can be a pain for a lot of people, so I stripped back the content and posted the template in a repo on GitHub. I just thought I'd share and get the word out, and I've had decent traffic from subreddits. I'm hopeful if it gets enough use and some forks, that the implementation might be worked and improved upon. Let me know what you think, or if you have any questions about it: https://github.com/TBosak/game-template

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!

Hello everyone! i have a very specific question, i need to somehow pause the game at the end of the frame render, execute a function and then render the next frame, and do the same over and over, is that possible? if there is no function that would allow to do that, what is the function that takes care of the scene rendering so i could modify it? Thanks!

i need a little help getting my code to work. I can't get the star score to increase. i can only make it go NAN... HELP ? "Making you own game" on the last part i'm having trouble making tht work.

GoldenQuest is an educational game for learning the principles of coding while having fun. Play online: https://app.codingpark.io/goldenquest The game canvas is made with Phaser. The code editor is made with dslforge.org and integrated in the game. Here you can see screenshots of one level, the level selector and the level editor. GoldenQuest is a much more advanced version of "the adventures of the pirate robot" that we already showcased here some months ago! Enjoy! Comments and feedback will be appreciated!

Hi! I can access the x parameter on this.draw() function, why it doesn't work on this.updateRotation()?? After I create a Shooting Module on my game loop I can access the getX(). What I am missing? function ShootingModule(_canvas){ this.x = 200; this.y = 500; this.radius = 16; this.rotation = 0; this.canvas = _canvas; this.color = "blue"; this.draw = function (context){ context.beginPath(); context.translate(this.x, this.y); context.rotate(this.rotation * Math.PI / 180); context.arc(0, 0, this.radius, 0, Math.PI * 2, true); context.fillStyle = this.color; context.fill(); context.fillRect(-6, -this.radius -6, 12, 12); context.stroke(); context.setTransform(1, 0, 0, 1, 0, 0); }; this.updateRotation = function(e){ console.log(this.x); this.rotation = Math.atan2(e.clientY - this.y, e.clientX - this.x); }; this.update = function(){ }; this.getX = function(){ return this.x; }; } In my main loop script: playerShootingModule = new ShootingModule(canvas); canvas.addEventListener('mousemove', playerShootingModule.updateRotation, true);

Hi! I'm making a game where the player clicks or touches the screen and his avatar walks towards that point and stops. It works great without obstacles. With obstacles the player avatar get stuck in the corner. See gif below. I managed to fix it, but it feels hacky. When hero (player's avatar) collides with box (obstacle on screen) I move him towards his target EXAMPLE: if hero collides with left or right side of box and target is above him, I move hero up a bit function collisionHandler(){ //prevent hero avatar from getting stuck on corners kick = 0.4; if(box.x < hero.sprite.x && hero.target.sprite.x > hero.sprite.x){ hero.sprite.x += kick; //KICK right } else if(box.x > hero.sprite.x && hero.target.sprite.x < hero.sprite.x){ hero.sprite.x -= kick; //KICK left } if(box.y < hero.sprite.y && hero.target.sprite.y > hero.sprite.y){ hero.sprite.y += kick; //KICK down } else if(box.y > hero.sprite.y && hero.target.sprite.y < hero.sprite.y){ hero.sprite.y -= kick; //KICK up } } Is there a property of ARCADE physics I'm missing? Do I need my hacky code or there's a better way of fixing it? UPDATE: Github page: https://github.com/CaioMGA/ZenvaGameJam/ hero.js: function createHero(x, y, _speed){ return { "alive":true, "walking" : false, "speed":_speed, "direction" : {"x":1, "y":0}, "target":null, "sprite" : null, "createTarget": function(){ this.target = createTarget(); }, "createAnimations" :function(){ this.sprite = game.add.sprite(x, y, 'hero_spritesheet', 10); this.sprite.anchor.setTo(0.5, 0.5); this.sprite.animations.add('walkH', [13, 14 ,15, 14], 8, true); this.sprite.animations.add('walkUp', [7, 8, 7, 9], 8, true); this.sprite.animations.add('walkDown', [10, 11, 10, 12], 8, true); this.sprite.animations.add('idle', [10], 8, false); this.sprite.animations.add('idleUp', [7], 8, false); this.sprite.animations.add('victory', [10, 16, 10, 16, 10, 16], 5, false); this.sprite.animations.add('death', [0, 1, 2, 3, 0, 1, 2, 3, 4, 5, 6], 10, false); this.sprite.animations.play('idle'); game.physics.enable(this.sprite, Phaser.Physics.ARCADE); this.sprite.body.collideWorldBounds = true; this.sprite.body.setCircle(16); this.sprite.body.bounce.set(0.05); }, "death" : function(){ this.sprite.animations.play('death'); }, "walk" : function(direction){ this.sprite.animations.play('walkH'); this.sprite.scale.x = direction; }, "walkUp" : function(){ this.sprite.animations.play('walkUp'); }, "walkDown" : function(){ this.sprite.animations.play('walkDown'); }, "stop" : function(){ this.walking = false; this.sprite.animations.play('idle'); }, "victory" : function(){ this.sprite.animations.play('victory'); }, "update" : function(){ this.move(); }, "move" : function(){ if(this.walking){ game.physics.arcade.moveToXY(this.sprite, this.target.sprite.x, this.target.sprite.y,this.speed, 0); if(Phaser.Math.distance(this.sprite.x, this.sprite.y, this.target.sprite.x, this.target.sprite.y) < 8){ this.sprite.x = this.target.sprite.x; this.sprite.y = this.target.sprite.y; this.walking = false; this.sprite.body.velocity.setTo(0, 0); this.stop(); this.target.hide(); } } }, "setTarget" : function (x, y){ this.target.set(x, y); this.walking = true; if(Math.abs(this.sprite.x - this.target.sprite.x) >= Math.abs(this.sprite.y - this.target.sprite.y)){ if(this.sprite.x > this.target.sprite.x){ this.walk(-1); } else { this.walk(1); } } else { if(this.sprite.y > this.target.sprite.y){ this.walkUp(); } else { this.walkDown(); } } }, "init" : function(){ this.createAnimations(); this.createTarget(); this.target.init(); } }; }

Coding for Fun with The adventures of the Pirate Robot Click here to Play the game The Pirate Robot can walk, jump, fight... but what the Pirate Robot like the most is to dig and find incredible treasures! Write the actions and join this programming adventure. 20 levels of increasing complexity to learn the principles of programming or just for having fun. Development notes: The game canvas is made with HTML5 and Phaser, and other technologies from the Eclipse IDE ecosystem are used to create the pirate robot language editor. Mainly provided by DSLForge . Some implementation details about the editor can be found in this post

Hey there, So I've snagged onto a little problem while developing my game. I'm using Phaser with it's inbuilt support of gamepad. The axis of the controller input works in a way such that it returns 1 when held to the right and -1 when held to the left. Here's a picture to make things easier to understand. How would I map the values to degrees? Here's a visual representation of what I'd like to get. What's a formula that would allow me to do this?

Hello, I'm very new to Javascript (and coding). I just finished my first game, a clone of Pong. I have it controlled via the mouse movement, now I'd like to add code that will let the user swipe up or down on a touchscreen and have that relate the to controls for the mouse. Any Help would be appreciated. Thanks in advance. Here is what I have for my mouse controls. window.onload = function() { canvas = document.getElementById('gameCanvas'); canvasContext = canvas.getContext('2d'); var framesPerSecond = 30; setInterval(function() { moveEverything (); drawEverything(); }, 1000/framesPerSecond); canvas.addEventListener('mousedown', handleMouseClick); canvas.addEventListener('mousemove', function(evt) { var mousePos = calculateMousePos(evt); paddle1Y = mousePos.y - (PADDLE_HEIGHT/2); }); } code help.tiff

So i read it somewhere a few days ago the playground were open sourced by some individuals. I take a closer look at the code, i found at github. Now the question: So the half of it is missing. The Paths to the single source files needed are changed I think it is a good idea to make pull a requst first were all paths pointing again to https://github.com/BabylonJS/Babylon.js ??? and the do the hard stuff like, change buttons, ui, add new presets... textures. i think this is a difficult question. becourse the playground is running on a different server for now. and when i start to remap the paths back to babylonjs, its kind of counterproductive.

Hello everyone, I noticed a weird trend as soon as we start talking about code protection issues within html5 games /simple-page applications . Everyone seems to say that "as soon as it is Javascript, you can't hide anything" . Meaning you can't prevent someone to uncover the hidden solution to level 5 by looking at your code, or simply to copy it. This spawns a lot of issues, especially piracy and game-design related. So, what are the most effective protection mechanisms you can add to your html5 game?

Introducing yoanimate online service for 3D animators and Game Artists. Example Participate to the yoanimate 3d animated character Contest and win prizes ranging from $50-$1000! Start uploading your fbx files now at yoanimate.com and be among the first 50 talented animators to get $50 just for uploading your models! 2nd prize $250 1st prize $1000 Do you want to find out more? Go to http://yoanimate.com/ Watch the video tutorials for our 3dpreview editor and for the material editor. 3d preview editor Material Editor Check out specifications to know what to do before uploading your files. Specifications Our site offers an enhanced interactive 3dpreview editor with many features such as: A variety of backgrounds and platforms Adjustment of animation speed Scaling of your characters Hue and saturation of the background Adjustments to materials with our online material editor Preferable lighting settings Save your settings Share your work with your colleagues and friends

Hello, I am the author of Phaser Chains (http://phaserchains.boniatillo.com http://phaser.io/chains) and now I want to present to you my last work: *Phaser Editor*. http://phasereditor.boniatillo.com (it is a desktop editor) (This editor was announced in phaser.io (by the Phaser authors) with the title "A complete Phaser editor with powerful features". ) General JavaScript editors are good for Phaser because the Phaser simplicity but I see the need of something more dedicated: - Project and file creation wizards. - Coding assistance (type inference, auto-completion of the API, doc hovers, preview). - Integrated and quick help. - Integrated web server for easy testing. - Assets manager (following the official Phaser Asset Pack format). - Assets packers (image and audio atlas). - Keep it simple enough that you can develop your big game but also test any other code snippet or example of the many Phaser tutorials in the internet. - Transparency: there is not any other layer, wrapper or plug-in on top of Phaser: I do not want to hide Phaser, I want you to learn it. - Tooling: with the time I would like to integrate common developing tasks into the editor, for example, right now it is implemented an Optimize PNG images, but I want more. - The name is Phaser Editor but my goal is a Phaser IDE ;-) How am I doing it? I am building Phaser Editor on top of one of the leaders platforms of the programming industry: the Eclipse platform, specially, the Eclipse Web Tools. If you know the Eclipse ecosystem you will feel very comfortable in Phaser Editor, if you don't know Eclipse yet, I think this is the moment for you to go with it ;-) Eclipse is very popular in the Java world, but it is also popular to develop with other programming language (javascript, python, php, C, etc...) because it can be extended and customized for a specific technology. The Eclipse workbench is full of features and a plenty of third plug-ins going from color themes and Git integration to cordova based tools for mobile development, and all of them can be installed (or integrated in a future) in Phaser Editor. The Eclipse Web Tools, specially the JavaScript Development Tools (http://wiki.eclipse.org/JSDT), are a very good piece of software, the most I like is the type inference engine, that in the case of Phaser Editor it is customized to give a much better experience with the Phaser API. So take a look to a demo video. Download and try it yourself: http://phasereditor.boniatillo.com To run it first you should install the Java runtime (JRE 8 64bits), then execute the PhaserEditor.exe file. In a future a I will give the option to bundle the JRE together with the product and make it available also for the others operating systems supported by Eclipse (linux, osx). Check the list of features What's next? This is only a preview, but in dependence of your very valuable feedback I will release it sooner or later. Right now I am working on complete some features introduced in Phaser 2.4.3 and writing the user guide. Suscribe to our mailing list and we notify you when the final product (or a major update) is ready (I am not going to explode your inbox) Thanks, Arian Update 2015/10/29: Phaser Editor RC release, read post.

Now last 2 months my own freetime projects are completely frozen. I would like to develop them forward, but coding needs also right mindstate, "flow". Every time when I open project, I watch code 2 seconds, sigh, and then close the editor. Do you have this kind of situation ever, and how do you beat it and get that flow on again?

hey everyone im in university studying bachelor of inter active media, but that's not the point ..... we need to make a mobile game in phaser for our assignment.... you see my code is super long, i have no idea how to place enemies in my game for my character to kill, or to place health bars, how to have random collectables appear or even how to get a game over screen . right now my game is a player some platforms and some water kinda like mario looking....... i tried using states to get a menu and a game over screen ect.... but my code refused to work. i need help.... some tutorials because my teacher never even showed us how..... here is my code so far any help is welcome. var game = new Phaser.Game(960, 540, Phaser.AUTO, 'game', { preload: preload, create: create, update: update }); var player;var Keys = Phaser.Keyboard;var speed = 4;var style = 'default';var cursors; function preload() { game.load.image('sky', 'images/sky3.png');game.load.image('sky2', 'images/sky4.png'); game.load.image('sky3', 'images/sky5.png'); game.load.image('ground', 'images/platform3.png'); game.load.image('ground1', 'images/platform4.png'); game.load.image('ground2', 'images/platform5.png'); game.load.image('ground3', 'images/platform6.png'); game.load.image('skyplat', 'images/skyplatform.png'); game.load.image('skyplat2', 'images/skyplat2.png'); game.load.image('star', 'images/star.png'); game.load.spritesheet('dude', 'images/dude.png', 32, 48);game.load.image('water', 'images/water_back.png');game.load.image('water1', 'images/water_front.png'); } function create() { game.world.setBounds(0, 0, 960*10, 540); game.add.tileSprite(0, 0, 960*5, 540, 'sky'); game.add.sprite(4800, 0, 'sky2'); game.add.tileSprite(6406, 0, 960*5, 540, 'sky3'); ground = game.add.sprite(0, 396, 'ground'); game.physics.arcade.enable(ground);ground.scale.setTo(2, 1); ground.body.immovable = true; skyplat = game.add.sprite(500, 290, 'skyplat'); game.physics.arcade.enable(skyplat);skyplat.scale.setTo(1, 1); skyplat.body.immovable = true; skyplat2 = game.add.sprite(700, 250, 'skyplat'); game.physics.arcade.enable(skyplat2);skyplat2.scale.setTo(1, 1); skyplat2.body.immovable = true; skyplat3 = game.add.sprite(1050, 215, 'skyplat'); game.physics.arcade.enable(skyplat3);skyplat3.scale.setTo(1, 1); skyplat3.body.immovable = true; skyplat4 = game.add.sprite(1300, 215, 'skyplat'); game.physics.arcade.enable(skyplat4);skyplat4.scale.setTo(2, 1); skyplat4.body.immovable = true; skyplat5 = game.add.sprite(2150, 344, 'skyplat'); game.physics.arcade.enable(skyplat5);skyplat5.scale.setTo(2, 1); skyplat5 .body.immovable = true; skyplat6 = game.add.sprite(2250, 295, 'skyplat'); game.physics.arcade.enable(skyplat6);skyplat6.scale.setTo(1, 1); skyplat6 .body.immovable = true; ground2 = game.add.sprite(1150, 396, 'ground'); game.physics.arcade.enable(ground2);ground2.scale.setTo(1, 1); ground2.body.immovable = true; ground3 = game.add.sprite(1800, 396, 'ground'); game.physics.arcade.enable(ground3);ground3.scale.setTo(2, 1); ground3.body.immovable = true; ground4 = game.add.sprite(2950, 396, 'ground1'); game.physics.arcade.enable(ground4);ground4.scale.setTo(1, 1); ground4.body.immovable = true; ground5 = game.add.sprite(3250, 396, 'ground1'); game.physics.arcade.enable(ground5);ground5.scale.setTo(1, 1); ground5.body.immovable = true; ground6 = game.add.sprite(3600, 396, 'ground1'); game.physics.arcade.enable(ground6);ground6.scale.setTo(1, 1); ground6.body.immovable = true; ground7 = game.add.sprite(3900, 396, 'ground'); game.physics.arcade.enable(ground7);ground7.scale.setTo(2, 1); ground7.body.immovable = true; skyplat7 = game.add.sprite(4200, 290, 'skyplat'); game.physics.arcade.enable(skyplat7);skyplat7.scale.setTo(1, 1); skyplat7.body.immovable = true; skyplat8 = game.add.sprite(4400, 250, 'skyplat'); game.physics.arcade.enable(skyplat8);skyplat8.scale.setTo(1, 1); skyplat8.body.immovable = true; skyplat9 = game.add.sprite(4600, 290, 'skyplat'); game.physics.arcade.enable(skyplat9);skyplat9.scale.setTo(1, 1); skyplat9.body.immovable = true; ground8 = game.add.sprite(5000, 396, 'ground'); game.physics.arcade.enable(ground8);ground8.scale.setTo(1, 1); ground8.body.immovable = true; ground9 = game.add.sprite(5500, 396, 'ground2'); game.physics.arcade.enable(ground9);ground9.scale.setTo(1.5, 1); ground9.body.immovable = true; skyplat10 = game.add.sprite(5700, 290, 'skyplat2'); game.physics.arcade.enable(skyplat10);skyplat10.scale.setTo(1, 1); skyplat10.body.immovable = true; skyplat11 = game.add.sprite(5900, 250, 'skyplat2'); game.physics.arcade.enable(skyplat11);skyplat11.scale.setTo(1, 1); skyplat11.body.immovable = true; skyplat12 = game.add.sprite(6250, 215, 'skyplat2'); game.physics.arcade.enable(skyplat12);skyplat12.scale.setTo(1, 1); skyplat12.body.immovable = true; skyplat13 = game.add.sprite(6500, 215, 'skyplat2'); game.physics.arcade.enable(skyplat13);skyplat13.scale.setTo(2, 1); skyplat13.body.immovable = true; skyplat14 = game.add.sprite(7350, 344, 'skyplat2'); game.physics.arcade.enable(skyplat14);skyplat14.scale.setTo(2, 1); skyplat14 .body.immovable = true; skyplat15 = game.add.sprite(7450, 295, 'skyplat2'); game.physics.arcade.enable(skyplat15);skyplat15.scale.setTo(1, 1); skyplat15 .body.immovable = true; ground10 = game.add.sprite(6350, 396, 'ground2'); game.physics.arcade.enable(ground10);ground10.scale.setTo(1, 1); ground10.body.immovable = true; ground11 = game.add.sprite(7000, 396, 'ground2'); game.physics.arcade.enable(ground11);ground11.scale.setTo(2, 1); ground11.body.immovable = true; ground12 = game.add.sprite(8150, 396, 'ground3'); game.physics.arcade.enable(ground12);ground12.scale.setTo(1, 1); ground12.body.immovable = true; ground13 = game.add.sprite(8450, 396, 'ground3'); game.physics.arcade.enable(ground13);ground13.scale.setTo(1, 1); ground13.body.immovable = true; ground14 = game.add.sprite(8800, 396, 'ground3'); game.physics.arcade.enable(ground14);ground14.scale.setTo(1, 1); ground14.body.immovable = true; ground15 = game.add.sprite(9100, 396, 'ground2'); game.physics.arcade.enable(ground15);ground15.scale.setTo(2, 1); ground15.body.immovable = true; ground16 = game.add.sprite(10200, 396, 'ground2'); game.physics.arcade.enable(ground16);ground16.scale.setTo(1, 1); ground16.body.immovable = true; water = game.add.tileSprite(0, 470, 960*10, 540, 'water');game.physics.arcade.enable(water); water.body.setSize(960, 20, 0, 0);water.scale.setTo(2, 1); water.body.immovable = true; water = game.add.tileSprite(0, 435, 960*10, 540, 'water');game.physics.arcade.enable(water); water.body.setSize(960, 20, 0, 0);water.scale.setTo(2, 1); water.body.immovable = true; // player player = game.add.sprite(0, 340, 'dude'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); game.camera.follow(player); } function update() {game.physics.arcade.collide(player, ground); game.physics.arcade.collide(player, ground2);game.physics.arcade.collide(player, ground3);game.physics.arcade.collide(player, ground4);game.physics.arcade.collide(player, ground5);game.physics.arcade.collide(player, ground6);game.physics.arcade.collide(player, ground7);game.physics.arcade.collide(player, ground8);game.physics.arcade.collide(player, ground9); game.physics.arcade.collide(player, ground10);game.physics.arcade.collide(player, ground11);game.physics.arcade.collide(player, ground12);game.physics.arcade.collide(player, ground13);game.physics.arcade.collide(player, ground14);game.physics.arcade.collide(player, ground15);game.physics.arcade.collide(player, ground16); game.physics.arcade.collide(player, skyplat);game.physics.arcade.collide(player, skyplat2);game.physics.arcade.collide(player, skyplat3);game.physics.arcade.collide(player, skyplat4);game.physics.arcade.collide(player, skyplat5); game.physics.arcade.collide(player, skyplat6);game.physics.arcade.collide(player, skyplat7);game.physics.arcade.collide(player, skyplat8);game.physics.arcade.collide(player, skyplat9);game.physics.arcade.collide(player, skyplat10);game.physics.arcade.collide(player, skyplat11);game.physics.arcade.collide(player, skyplat12);game.physics.arcade.collide(player, skyplat13);game.physics.arcade.collide(player, skyplat14);game.physics.arcade.collide(player, skyplat15); cursors = game.input.keyboard.createCursorKeys();player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else { // Stand still player.animations.stop(); player.frame = 4; } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -250; } }

I am new to Game Development with Phaser. I use Dreamweaver and i want to enable code hinting for Phaser just like Dreamweaver has for jQuery. If you have any ideas please reply fast.

Hello I have been trying everything to put ads in my pandajs game but I am struggling to do so. The cocoonjs website is not clear on what code exactly I need to put into my game. I just want banner ads on the bottom of the screen Could someone please help me! thanks

Hi!, I'd like to ask why setting full screen in Phaser can only be called using the input from the user game.input.onDown.add(gofull, this);function gofull(){ Phaser.StageScaleMode.EXACT_FIT = 0; game.stage.scale.startFullScreen(); alert('full screen');}When calling the function gofull() in the create function or update function, the game doesn't go full. Thanks in advance!

When using Flixel I would have a gamestate, a player, enemy, perhaps coins etc as separate classes. Maybe a registry that stored assets etc. I had been tooling around with ImpactJS and that framework uses a similar structure. How do I implement a structure like this with a Phaser game? I only want the the index.html to set the css etc and load the game.