Search the Community

Showing results for tags 'phaser'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 2,970 results

  1. Hello, I'm creating my first mobile game via Phaser framework and canvas. So for creating the channel (please check attached screenshot of my spiral channel) I imported my sprite into Physics Editor program, did what is described in this tutorial. Now trying to prepare the part when user will press/touch the ball holder, after touch/press the ball should rotate around the channel and depending on the speed it should fall into holes. Did some research but can't find any example on how I can make the ball move around the channel. Any ideas will be appreciated. I have following code for loading spiral sprite and its json file: preload: function() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image("spiral", "assets/images/pinball-channel.png"); game.load.image("ballHolder", "assets/images/ball-holder.png"); game.load.image("ball", "assets/images/ball.png"); game.load.physics("physicsData", "assets/sprite_physics.json"); }, create: function() { var ballHolderGraphic; ballHolderGraphic = game.add.sprite(196.5, game.height-98, 'ballHolder'); ballHolderGraphic.width = 60; ballHolderGraphic.height = 104; ballGraphic = game.add.sprite(213, game.height-ballHolderGraphic.height-23, 'ball'); ballGraphic.width = 28; ballGraphic.height = 28; var channel; game.physics.startSystem(Phaser.Physics.P2JS); channel = game.add.sprite(225, 365, 'spiral'); channel.width = 400; channel.height = 550; game.physics.p2.enable(channel, false); channel.body.clearShapes(); channel.body.loadPolygon('physicsData', 'spiral'); } Also I have one issue, after this line (channel.body.loadPolygon('physicsData', 'spiral');) nothing (image, button,etc...) is being displayed in the screen but once I add them before this channel part, it works perfectly. Any ideas why? Thanks
  2. Body vs Sprite (ARCADE physics)

    Hello to everyone, I am new to Phaser. These days I am studying the tutorials and I suddenly came across the many problems related to sprite of different dimensions. So I am learning to use Texture Atlas. I have create an animation with the related json file. All work just fine (visually). Playing with the json file I am able to adjust the sprite width (green box) but not the body size (red box). The ARCADE Physics has only ONE box size? Is there a way to automatically adjust the body size following the sprite size? Or I must move on onto more complicated physics. Thanks to enyone who can help me.
  3. Particle Editor for Particlestorm

    Hi Everybody! I want to present you my Particle Editor I created in Electron using Phaser and the Particlestorm Plugin. On a Project I'm currently working, I want to have some Particle Effects for my Level Design, but tweaking the Emitter Settings in the Editor, starting/reloading the Page to see the result, felt really cumbersome. So I decided to brush up my Electron Skills (which I also need on the Project ;)) and create my own Tools. The Particle Editor is the first Tool I will share with you, but a Physics Editor will follow (Collision Shapes with Box2D and such). Enter the Particle Editor: Download from my Webpage Currently available for Mac and Windows. (If you need help, please ask) Please remember! The Software is Version is 0.8.2a, so many Features are planned. So please tell me what you think, what you miss and what Ideas you might have for it's development. I'm always interested to see what you create with my Stuff, so feel free to share Hope you like it! Hafgandil
  4. Short questions about

    Hello, I like this game in Phaser: My first question. Is it 2D or 3D game?
  5. So I am preloading an atlasXML spritesheet game.load.atlasXML('sheet', 'images/sheet.png', 'images/sheet.xml'); and I can create a sprite using: game.add.sprite(,, 'sheet', 'playerShip1_orange.png'); I am trying not to use a for loop to create many sprites for a a sprite group I'm creating by using Group.createMultiple Now if I'm just loading a sprite or image, I can do this.meteorGrey =; this.meteorGrey.createMultiple(25, 'meteorGreyBig1.png'); Now when it's in a atlas sprite, this is where I'm running into trouble. this.meteorGrey =; this.meteorGrey.createMultiple(25, 'sheet', 'meteorGreyBig1.png'); It ends up displaying nothing
  6. Visual Novel Engine RenJS

    Hi! I'm a developer from Argentina and I just released a visual novel engine based on Phaser and inspired by Ren'Py, called RenJS. The stories are written in yaml on a list of actions, and then interpreted and executed with Javascript and Phaser. It's easy to use by non programmers and it's super easy to extend and modify for anyone that knows a bit of phaser. I invite you to check the tutorial game I made with the engine itself in, you can also get the code from, download it, play it locally and grab the files to make your own visual novels. There's no official documentation of it yet, but I'm working on it. I hope to get some feedback from you all, thank you!
  7. [Phaser]

    Hi, - A massively multiplayer online falling block puzzle game, created using the Phaser game engine. Controls: Arrow keys and spacebar. Current Features: Instant join - only specify your nickname and you're ready to play. Multiplayer. No player limit. Dynamically sized grid with horizontal wrapping. Mistake detection. Sabotage other players by dropping on them. Phase shift into gaps directly below you (hold the down key while your block is being placed). Ingame chat [Enter]. Scoreboard. Facebook: Twitter: Blog: Please give it a try and let me know what you think! Pyre
  8. [Phaser] 3anglez

    Avoid, smash and defeat your enemies! Get endless entertainment! 3anglez is a minimalist 2D game. The game has simple instructions : tap anywhere to move. The action takes place in a colorful set up built entirely from triangles. Your progress is guided by the slowly changing colors which are present in every level. Your job is to survive for as long as you can. Each death improves your gameplay abilities. You are able to collect coins by avoiding, smashing and defeating your enemies. You can use them to upgrade the skills of your player. If you die, you don't get a second chance. How long can you stay alive? PS: If the game is too hard upgrade your speed! Made with Phaser + Cordova + Crosswalk
  9. Hello everyone, I've been looking in to how one might create sloping tiles in Phaser.js and its Arcade physics engine. From what I've done so far, I just basically have two squares moving through the middle of an existing square as an experiment to see if my 'limited' knowledge of maths actually works (see fiddle): My plan was to simply move a sprite along that same trajectory while ignoring the left and right collisions of the tile... So I gave it a shot and attempted to apply the method to Phaser, although had very little luck doing so. I've checked out a few articles but sadly don't 100% understand them yet, so heading back to them after posting this. I just wondered if anyone else had any luck, and if you may have some pointers on how to go about it. Cheers for your time guys, -D
  10. I created a Mario map in tiled. Then when i try to put it into phaser it wont load. its giving me this error I've searched the internet and haven't found any solutions to this problem. My javascript file lists as follows: Please help, Thanks EDIT: I fixed this problem but now i have a new one. I'm get this error Anybody know how to solve it? Thanks
  11. Hi guys, I've tried everything, but still cannot get my game to have states. I hate to post my whole code but I have no idea what else to do. If anyone has a bit of time, please let me know what you think. A noob in these matters, I still don't get why I have to use 'this'. Also tried to do this in different files but nothing. I just want a basic 'play' menu, the actual game, and then the 'play again'. Am I doing something wrong in the code that prevents this to have states? I also tried the game.pause = true, but as it pauses everything and buttons won't work. 'use strict'; let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'showgame', { preload: preload, create: create, update: update, render: render, }); function preload () { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.stage.backgroundColor = '#000'; game.load.image('ground', './assets/scripts/game/images/ground.jpg'); game.load.image('star', 'assets/scripts/game/images/star.png'); game.load.image('sadmicrowave', 'assets/scripts/game/images/sadmicrowave.png'); game.load.atlasJSONHash( 'sprites', './assets/scripts/game/images/spritesheet-mini.png', './assets/scripts/game/images/spritesheet-mini.json' ); game.load.atlasJSONHash( 'enemies', './assets/scripts/game/images/students.png', './assets/scripts/game/images/students.json' ); } let sadmicrowave; let katie; let students; let tables; let cursors; let score = 0; let scoreText; let timerText; let weapon; let fireButton; let table1; let showgame = document.getElementById('showgame'); let scorediv = document.getElementById('scorediv'); let scorelabel = document.getElementById('label'); function create() { let ground = game.add.image(0, 0, 'ground'); ground.fixedToCamera = true; // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setImpactEvents(true); game.physics.p2.defaultRestitution = 0.8; // Collission Groups let playerCollisionGroup = game.physics.p2.createCollisionGroup(); let studentCollisionGroup = game.physics.p2.createCollisionGroup(); let table1CollisionGroup = game.physics.p2.createCollisionGroup(); game.physics.p2.updateBoundsCollisionGroup(); let x =; let y =; //weapon - does not work yet weapon = game.add.weapon(30, 'sprites', 'chair.png'); weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS; weapon.bulletSpeed = 500; weapon.fireRate = 600; // main character katie = game.add.sprite (700, 300, 'sprites','katie.png'); game.physics.p2.enable(katie); katie.body.setCircle(30); katie.body.setZeroDamping(); katie.scale.x *= -1; katie.anchor.set(0.5); katie.body.fixedRotation = true; katie.smoothed = false; katie.body.setCollisionGroup(playerCollisionGroup); katie.body.collides(studentCollisionGroup, hitStudent); katie.body.collides(table1CollisionGroup, hitTable);; weapon.trackSprite(katie, 0, 0, true); fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR); let students =; students.enableBody = true; students.physicsBodyType = Phaser.Physics.P2JS; students.smoothed = false; for (let i = 0; i < 23; i++) { // let student = students.create(190 + 69 * i, -90, 'enemies', i); let student = students.create(x, y, 'enemies', i); student.body.setRectangle(30,30, 0, 0, 4); student.body.setZeroDamping(); student.body.fixedRotation = true; student.body.setCollisionGroup(studentCollisionGroup); student.body.collides([ studentCollisionGroup, playerCollisionGroup, table1CollisionGroup ]); } students.setAll('inputEnabled', true); students.setAll('input.useHandCursor', true); let tables = game.add.physicsGroup(); tables.enableBody = true; tables.physicsBodyType = Phaser.Physics.P2JS; tables.smoothed = false; // for (let i = 0; i < 100; i++) { let table1 = tables.create(x, y, 'sprites', 'table.png'); table1.body.setRectangle(10,10, 0, 0, 0); table1.body.setZeroDamping(); table1.body.setCollisionGroup(table1CollisionGroup); table1.body.collides([ studentCollisionGroup, playerCollisionGroup ]); } let door = game.add.sprite (20, 500, 'sprites', 'door.png'); cursors = game.input.keyboard.createCursorKeys(); scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#000' }); timerText = game.add.text(530, 16, 'Time: ', { fontSize: '32px', fill: '#000' }); * 30, fadePicture); } function hitStudent(katie, student) { // = 2; // for each {student.sprite.alpha -= 0.5}; student.sprite.alpha -= 1; score += 10; student.destroy(); } function hitTable(katie, table1) { // = 2; // for each {student.sprite.alpha -= 0.5}; table1.sprite.alpha -= 0.5; } // GAME OVER function gameover () { game.destroy(); console.log('game destroyed'); } function fadePicture() { game.add.tween(katie).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true); game.add.tween(scoreText).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true); } function update() { katie.body.setZeroVelocity(); if (cursors.left.isDown) { katie.body.moveLeft(350); } else if (cursors.right.isDown) { katie.body.moveRight(350); } if (cursors.up.isDown) { katie.body.moveUp(350); } else if (cursors.down.isDown) { katie.body.moveDown(350); } if (fireButton.isDown) {; } } function render() { scoreText.text = 'Score: ' + score; timerText.text = 'Time Left: ' +; if ( === 0 ) { gameover(); } }
  12. Hello guys, I wanted to know how to use the phaser in visual studio 2017? I know you have this tutorial: Only that from 2013 until 2017 much has changed, If someone could update the tutorial, it would help a lot. Also if someone can teach you how to add syntaxes to the autocomplete, it would help. The syntaxes in auto completer are missing a lot, especially for those who are starting!!
  13. Unable to repick tile

    Hi folks, first time into Phaser, and so far so good except... I have Tilemap with data from CSV, with one board checker. My goal is to have possibility to pick and set it to new playing field. With below snippet after one "pick and leave" it is not possible to pick him again. private _updateMarker(): void { this.pointer.x = this.playerLayer.getTileX( * Constants.TILE_SIZE; this.pointer.y = this.playerLayer.getTileY( * Constants.TILE_SIZE; if ( { if(this.currentTitle !== null) {, this.playerLayer.getTileX(this.pointer.x), this.playerLayer.getTileY(this.pointer.y), this.playerLayer);, this.currentTitle.y, this.playerLayer); this.currentTitle = null; } else { this.currentTitle =, this.pointer.y, this.playerLayer); } } } So maybe you have some idea what is going wrong here Thanks in advance!
  14. i test this example work with VS2017 finished and build! but not excute... T_T error message is "TypeError: i.Physics.Box2D is not a constructor "; >>>>> this line is problem.. i dont know why!!!!!! anyone help me... plz... exam project solutions list
  15. Hello, guys! I'm new here and in the world of games in general, that is why i need the quality feedback from community. I just finished my first game with Phaser, using a modern strucuture for the Javascript. The game is simple, but the organization of the code can serve as a reference for the community. I used ES6 for writing javascript and divided the code according to CommonJS pattern, using Browserify + Babel for this. I still used a linter (JSHint) for syntax tests and the Gulp for create and manage tasks like minify CSS, uglify JS, run the tests and do JS code via browserify (commonJS in client-side) + Babel (transpiler of ES5 for ES6). Ah, of course, all dependecies manages by NPM. I think that, for less experienced developers in hard code and javascript in general, my code can serve like a guide/boilerplate. Please, have a look at the repository and use the code as you prefer: Read the and talk to me, for any question. On the other hand, how I'm new in the world of games, i need on your tips to enhance user experience and gameplay. ******************************************************************************************************************************* Paw Patrol Game Description: A simple 2D phase game with "Paw Patrol" theme, aimed at childrens. In total there are four stages and the player has to get all the bones of each phase before the time runs out. Direct link for the game: Thanks!
  16. [ANDROID] Chip Chip Crap

    Hello world! Just realeased my first Phaser + Cocoon game. It is really a basic starter (side-)project but I'm quite happy how it came out. I plan to continue upgrading things so I'd really appreciate any suggestion/feedback. Hope you give it a try! Have a great day!
  17. [PHASER] Collide an ITEM with GROUND.

    Hello, I am actually trying to make my very first game with Phaser ! Saddly, I am not able to get it work. Actually, the game is simple : There is a ground, a character (player), and a "coin" that fall from the top of the game to the ground. If the player hit it, the score increase by 1. All of this work fine. But I want to end the game if the "coin" hit the grounds. For this, I want the coin to collide with the ground. But unfortunally, the player collide with the ground, and the coin pass through the ground. I don't understand why. Demo here. Keep in mind that this code & game is only for testing PHASER. Here is the full code : Could you please help ? ;...; xxx lol EDIT : I got the problem solved, just misstake to place it : Now I wonder why my function endGame() isn't call when gold hit the ground. EDIT² : I got my second problem solved with this code : But I don't understand the difference between my code and game.physics.arcade.overlap();. Can someone explain me ? Code updated aswell !
  18. Hello! Winter is coming. And for most of us winter is associated with Christmas. That's why I am glad to present you my brand new match3 HTML5 game "Christmas gifts". - All assets including sounds and graphics were made from the scratch; - Branding options are provided; - Less than 3 mb; - Both types of licenses (exclusive and non-exclusive) are available at the time of the creation of the post; PM me for details. Link to the game:
  19. Hey guys, I'm using the Tiled map editor and creating it with the code below: //GAME PRELOADER this.load.tilemap('map_testmap', 'assets/phaser_assets/maps/map_testmap.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('grass', 'assets/phaser_assets/tiles/grass.png'); this.load.image('spike', 'assets/phaser_assets/tiles/test_spike.png'); //GAME CREATE create: function() { // this.scale.pageAlignVertically = true;, 0, 2000, 1400); this.physics.startSystem(Phaser.Physics.ARCADE); this.stage.backgroundColor = '#3A5963' // this.add.sprite(0, 0, 'sky'); var map = this.add.tilemap('map_testmap'); map.addTilesetImage('grass', 'grass'); map.addTilesetImage('spike', 'spike'); map.setCollision([0, 1, 2, 15, 16, 17, 18, 19, 20, 30, 31]) this.layer = map.createLayer('Tile Layer 1'); // this.layer.fixedToCamera = false; // this.layer = map.createLayer('Tile Layer 1', 2000, 1400); // this.layer.anchor.setTo(0.5); // this.layer.position.set(,; this.layer.resizeWorld(); However, when I start the game up, my layer looks like this, but my actual layer looks like the image on the right. So my question is, how can I push the layer down on the canvas programmatically? I've tried changing the position, but it seems that the collision doesn't move with the layer's position. Any help would be greatly appreciated!
  20. Hello! I had a look at the forum and couldn't find any advice on this previously (/I don't know the terminology to look up) so I thought I would post and see if anyone could give advice. I am using revolute constraints in my project because I wanted, as you can image, a joint that allows rotation and allows the player to rotate it with keys. The issue is that they are just flopping around the revolution instead of being rigid until the player turns them. I went through the documentation and found other types of constrains, like lock constraints, but they don't seem to work, and I have even tried turning off gravity for the arms to see if that was the issue to no luck. The code for the constraints is below, and I am sure I am missing something obvious so any advice would be great! backConstraint = game.physics.p2.createRevoluteConstraint(player, [-5,-20], backArm, [-20,0.5]); frontConstraint = game.physics.p2.createRevoluteConstraint(player, [-5,-20], frontArm, [-20,0.5]);
  21. Hello! I had a look at the forum and couldn't find any advice on this previously (/I don't know the terminology to look up) so I thought I would post and see if anyone could give advice. I am using revolute constraints in my project because I wanted, as you can image, a joint that allows rotation and allows the player to rotate it with keys. The issue is that they are just flopping around the revolution instead of being rigid until the player turns them. I went through the documentation and found other types of constrains, like lock constraints, but they don't seem to work, and I have even tried turning off gravity for the arms to see if that was the issue to no luck. The code for the constraints is below, and I am sure I am missing something obvious so any advice would be great! backConstraint = game.physics.p2.createRevoluteConstraint(player, [-5,-20], backArm, [-20,0.5]); frontConstraint = game.physics.p2.createRevoluteConstraint(player, [-5,-20], frontArm, [-20,0.5]);
  22. [Phaser] Baked Donuts

    Hello, This is my new game. Any feedback would be greatly appreciated! Google Play: Baked Donuts YouTube: Baked Donuts
  23. Hi ! I'm new with phaser and i'm making a game, I have trouble with the double jump. I checked the others forum but it doesn't work with my game. I tried this and i checked the count of the jumps with an alert, and i see that it doesn't work bu i don't know why. // DOUBLE JUMP if (player.body.touching.down) // if player touch plateform, he gains his double jump { var jump = 2; } if (cursors.up.isDown && jump==2) { player.body.velocity.y = -400; //jump counter -1 jump--; alert(jump); } if (cursors.up.isDown && jump==1 ) { player.body.velocity.y = -400; jump--; alert(jump); } Thanks.
  24. Hi, I am really confused why I am getting errors with this code from the weapon plugin: create: function() { //load current level this.loadLevel(); this.weapon =, 'explode'); this.weapon.fireFrom.setTo(300,300, 1, 1); this.weapon.bulletKillType = Phaser.Weapon.KILL_CAMERA_BOUNDS; this.weapon.bulletGravity.y = -1000; this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR) .onDown.add(, this); The error is: phaser.js:100951 Uncaught TypeError: Cannot read property 'width' of undefined at (phaser.js:100951) It seems to be an issue with the context, but I have tried this.weapon, this.state, all to no avail. Annoyingly if I run from the console it shoots fine. If anyone can see what I'm doing wrong I'd be very grateful. Thanks, Gordon
  25. Super Asteroid Battle

    Join the Super Asteroid Battle! Bring your friends to fight the asteroids, collect ore, upgrade your spaceship, and shoot for the high score in this now multiplayer version of the classic Asteroids game. Built as a collaboration between Elisabeth Seite and Jackson Sui. We used the framework and for multiplayer. We think the game turned out very well and hope you enjoy it! Try playing it here! Github Link