Search the Community

Showing results for tags 'phaser'.



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

  1. Uncaught TypeError in my first app.

    Hello everybody I write my first application, add physics for my player, add cursors , input keyboards. En error you will see on the screenshots. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'gameDiv'); var spacefield; var backgroundv; var player; var cursors; var mainState = { preload: function(){ game.load.image('starfield', "assets/starfield.png"); game.load.image('player', "assets/player.png"); }, create: function(){ spacefield = game.add.tileSprite(0, 0, 800, 600, 'starfield'); backgroundv = 5; game.add.sprite(game.world.centerX, game.world.centerY + 200, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); }, update: function(){ spacefield.tilePosition.y += backgroundv; if(cursors.left.isDown){ player.body.velocity.x = -350; } if(cursors.right.isDown){ player.body.velocity.x = 350; } } }; game.state.add('mainState', mainState); game.state.start('mainState'); Whats wrong?
  2. Hello, I read this simple tutorial for beginners: Adventures in Phaser with TypeScript Physics using the P2 physics engine When two objects are in contact, the event "onBeginContact" must occur. But this does not happen. I moved the code to codepen:
  3. child sprite behind parent

    Hi Guys, I'm trying to link 3 sprites together for a player character using the addChild method on a sprite. I have backArm, player and frontArm sprites that need to be rendered in that order. The arms both rotate at the shoulder and the backArm needs to go behind the player sprite. I've seen a suggestion on this thread to have a main sprite container with a null key and add the sprites as children of that. I've tried that and I have my sprites rendered in the correct order but the arms do not follow the player anymore when it walks across the screen. The arms just stay in place while the player walks away. Pretty sure I've made an error somewhere. I'll put a code snippet below and any advice would be really helpful. Thanks create: function() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.playerContainer = this.game.add.sprite(200, 500, null); this.backArm = this.game.add.sprite(0, 500, 'backArm'); this.player = this.game.add.sprite(200, 500, 'player'); this.frontArm = this.game.add.sprite(0, 500, 'frontArm'); this.playerContainer.addChild(this.backArm); this.playerContainer.addChild(this.player); this.playerContainer.addChild(this.frontArm); this.game.physics.arcade.enable(this.player); this.player.anchor.setTo(0.5); this.frontArm.anchor.setTo(0.4866, 0.2925); this.backArm.anchor.setTo(0.4866, 0.2925); //walk animation this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 0, 24,'', 5), 24, true, false); this.player.animations.add('walkleft', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 24, 0,'', 5), 24, true, false); cursors = this.game.input.keyboard.createCursorKeys(); }, update: function() { //player walk movement this.player.body.velocity.x = 0; if (cursors.right.isDown) { this.player.body.velocity.x = 150; this.player.animations.play('walkright'); }else if (cursors.left.isDown){ this.player.body.velocity.x = -150; this. player.animations.play('walkleft'); }else { this.player.animations.stop(); this.player.frame = 25; } this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm.world); this.backArm.rotation = this.game.physics.arcade.angleToPointer(this.backArm.world); }
  4. Good afternoon, I was hoping that the community could look over my code and see if something needs to be adjusted. I recently started learning Javascript and I just started learning Phaser and easystar yesterday so this might all look ridiculous. At the moment all I am trying to accomplish is pathfinding the way it is done in a point and click adventure game such as Monkey Island or Day of the Tentacle from Lucasarts. I am trying to achieve it much how AGS(Adventure Game Studio) allows the user to set it up. Basically, you import a room image and then you draw over the room with a chosen color(Sort of like drawing a mask) all the area's that a character can walk and find a path to and from. What I am trying to achieve in my code is the same principle above and I am trying to use easystar and Phaser to accomplish this. Let me explain my code: I have three images: the 'background' image which will load up the image of the room the character will be in. 'walkablepath' will be the image that contains the image mask. Anything that is hot pink is where the character can walk. 'maincharacter' is the player character that will find the path when we click on a part of the screen we want the player to go to. At start we will create a 'bmd' object, create the walkable grid and then destroy the bmd object. The 'bmd' object is what will hold the walkable mask information. It will match the same size as the room image. It will have complete transparency and will be overlaid over the background image, but not visible to the user. 'walkableGrid' will be the grid data that easystar will use to calculate the walkable paths. 'walkableRGB' will contain the RGB value of Hot Pink so that we can find the hot pink pixels. 'gridCollection' will collect the X and Y pixel data in the 'bmd' object and push it to the 'walkableGrid' as it goes through each pixel line from top to bottom. The code will do this by iterating through each X and Y pixel in a loop. After that is completed, the mask will be destroyed, easystar will have a setup to determine the acceptable tiles in the grid. Function calculateWalkPath() will be called each time the user clicks on the screen and the game will try and calculate the path for the user to walk and move him to his destination. Please see the code below: //Set the initial game paramters - Will start with 800x600 resolution and will use WebGL as a renderer and default back to Canvas if WebGL is not present. var game = new Phaser.Game(800,600, Phaser.AUTO, '', { preload: preload, create: create, update: update}); var easystar = new EasyStar.js(); //Lets get easy star in here. var bmd; //This will be the object that will take the pixel data of the scene. //Assets that will be preloaded at start function preload(){ game.load.image('background', 'assets/room1.png'); //The game room background that will be loaded. game.load.image('walkablepath', 'assets/walkablepath.png'); //The room's walkable area. game.load.image('maincharacter', 'assets/character.png', 32, 48); //The main characters animated spritesheet who will be walking around the room. } //The first function called when we start our game function create(){ //We are going to obtain the width and height of the background room. var backWidth = game.cache.getImage("background").width;var backHeight = game.cache.getImage("background").height; bmd = game.make.bitmapData(backWidth, backHeight); //Getting ready to determine the room size and get the pixel data of the walkable path. game.add.sprite(0,0,'background'); // Will add the room background to the desktop. It will place the upper left part of the image to the upper left part of the screen. bmd.alpha = 0; //Let's make sure the image is completely invisible to the users eyes. bmd.draw('walkablepath', 0, 0); //Will overlay the transparent walkable path over the background image. var walkableGrid = new Array(); //Lets make the grid that easy star will define as the walkable points. var gridCollection; //This will collect the 2 dimensional array grids and push it to the walkableGrid. var walkableRGB = "255105180"; //This is the RGB value of the area's the user can walk on. - Hot Pink is the RGB Color //Following code will begin at the top left corner of the walkable area and check each pixel for the hot pink color. If it finds it, it will add a 0. If not, 1. for (i = 0; i < backWidth; i++) { gridCollection = "["; for (j = 0; j < backWidth; j++) { if (bmd.getPixelRGB(i, j) == "255105180"){ gridCollection = gridCollection + "0"; } else { gridCollection = gridCollection + "1"; } //If there is still more width in the image, it will add a comma. Otherwise it won't and the array can be closed off. if (j != backWidth) { gridCollection = gridCollection + ","; } } //Close up and then Push the Array to the walkable grid gridCollection = gridCollection + "]"; walkableGrid.push(gridCollection); } bmd.kill(); //let's destroy the walkable area path we created from view - we need to find a better way to do this process. easystar.setGrid(walkableGrid); //Let's add the 2 dimensional grid array we just created to Easy star's pathfinding grid. easystar.setAcceptableTiles([0]); //Let's also make sure that easy star is aware that the 0 tiles are the tiles that the player can walk on. } function update(){ } function calculateWalkPath() { //This function will be called every time the user clicks on a path to walk to. //Now let's calculate the path and presumably use tweening to move the character from it's current x and y position to it's next calculated position easystar.findPath(xClickDest, yClickDest, playerXpos, playerYpos, function( path ) { if (path === null) { //Do something like a shrug animation from the character for not being able to find a path. } else { game.add.tween(maincharacter).to( { x: path[0].x }, 2000, Phaser.Easing.Linear.None, true); game.add.tween(maincharacter).to( { y: path[0].y }, 2000, Phaser.Easing.Linear.None, true); } }); //Let's get this party started. easystar.setIterationsPerCalculation(1000); easystar.calculate(); } I have to admit, I did not test this code yet. I rather have a fresh pair of eyes on this as I spent a good half hour trying to figure this out today and feel rather brain dead. Now, my questions are these: Will this code operate correctly? Did I use Phaser and Easystar correctly? What about memory management and speed and what is a better way to manage this? How would you improve it? Also, can I set more than one acceptable tile for easystar and how? Thanks for looking and for your assistance.
  5. 1. There are examples where you can use assets, I don't see any option to register and upload? 2. How do I select the Phaser version to use in Sandbox editor?
  6. Using Cocoon with Phaser

    I've just made my first builds using Cocoon by Ludei. I've used Phaser/javascript to make the app. I started making some notes to aid me in the future as I don't make many app build builds and I'll have forgotten by the next time I do. I decided to put it here as it may help others. There isn't anything here that isn't available on Cocoon's docs, forums, and a few other places on the web but they are snippets that I wish had been in big red letters when I was working through it. Follow Cocoon's docs. What's written here is essentially the solutions/extra clarity to each sticking point I had. Include this line between the head tags of your index.html. (Code taken from Cocoon's docs) <script src="cordova.js"></script> include this in your body tags. <script type="text/javascript"> document.addEventListener('deviceready', function() console.log("Cordova is initialized and ready!"); }, false); </script> I start my game using the following code in index.html. I tried using the anonymous function as shown in a Phaser Cocoon template but this caused subtle changes to my game. I could not find what the cause was as it seemed utterly unconnected and, although I presume it must be to do with scope, impacted things that were scoped only to a single state. Essentially a Phaser group was no longer updating its children as it was expected to. Be sure to check your game carefully using the developer build as these new bugs can be subtle. I used the following. Uncommenting the first and last lines as in the template still seems to work but introduces those subtle bugs. <script type="text/javascript"> //(function(){ var game = new Phaser.Game(2048, 1536, Phaser.AUTO, 'game'); game.state.add('Boot', BasicGame.Boot); game.state.add('Preloader', BasicGame.Preloader); game.state.add('Game', BasicGame.Game); game.state.add('OtherState', BasicGame.OtherState); game.state.start('Boot'); //})(); </script> Create file structure of js assets src css index.html Zip these files *not* the folder they are in. See zip gotcha below. The bundle id you use in the cocoon builder must not have uppercase letters even though you may have already created a bundleid with apple that you cannot change. Fortunately, if you were stupid enough (me) to have done this a long time ago, it does not seem to matter that they do not match, Apparently Apple, at least, is case insensitive for bundle ids. FOr iOS, if you wish to test the resulting ipa on a device, build it using a development certificate and an adhoc provisioning profile. (Not a development provisioning profile/ensure your devices are added to your dev account before generating the provisioning profile). Just copy the ipa to iTunes and then to the device. Quirks that may be resolved in future updates: The zip file that you create of your project won't work if you use the the native Windows 'send to archive' using winrar results in a zip that does work. The help links accompanying each section are very useful. A minority, however, open in the current window so losing any changes you've made. Best to 'open as new window' just in case. Conclusions I have to say, the service was very good. Aside from the few issues mentioned above it went very smoothly. Uploading a single icon and having the service sort it into the myriad that Apple demands was a bonus time saver. For me, it was a much nicer process than when I used xcode and cordova alone. I've used the free service with a very small app (less than 5mb). I've had to use the webview+ as one section of my app uses the DOM but the performance is still very good. My app has a lot of sprites on screen but they don't update much. Only the zip issue was nearly a showstopper. Whether this is an issue with Microsoft's archiver or Cocoon's reading of the zip I don't know but it was the only problem I found that really needs to be addressed with urgency. The value of Cocoon's service will vary for you, but I'll definitely be considering the paid for version when I'm ready for its extra features.
  7. I wrote my very first blog post. It's a tutorial on how to create a multiplayer game with phaser in the client, and Node.js in the server: The server uses Socket.io and Express.js. Part 1: http://gojasonyang.com/post/phaserMultiplayerGamePart1.html It's for complete beginners who aren't familiar with Node.js and Phaser. I hope someone finds it useful if it's their first time working with Phaser and Node.js !!
  8. WildCowboy

    Hello, game devs I created my first game WildCowboy with Phaser.js. This game is interpretation classic Sokoban. Game include 60 classic levels. I will be glad to hear your opinion and comments links: Web: itch.io Android: Google Play Regards.
  9. I've dabbled in developing Flash games back in the day using frameworks like Flashpunk, but haven't done much in terms of game development in recent years. I kept developing concepts though, one of which I'd like to develop further using modern tools - but I'm completely lost in the current world of 2D game architectures. One option I'd really like to have is being able to export to console (PS4/XBone). Consequently I've tried out Unity and Game Maker Studio (I've bought a 1.4 version license some time ago). Both seem very cumbersome to me and I'm struggling to get a decent workflow established. I've liked ActionScript based frameworks like Flashpunk for being "code only" - without any weird GUIs that (in my apparently old mind) seem clunky and unintuitive. If I need further dev tools, I like to code them myself or use stuff like http://www.ogmoeditor.com/ that I can write import methods for. As a result I've stumbled over Phaser (and other HTML5 based frameworks) and they seem to offer the exact style of game development I like - but I couldn't find much about bundling games made with Phaser into native applications. Sure, there are things like cocoon.io, but those seem to be aimed at creating windows executables aimed for platforms like Steam. While I obviously want the option to release on PC/Steam, I don't really need mobile nor web - I'd rather have console instead. (I know about the difficulties related to releasing anything on console marketplaces and dealing with Sony etc. But my game would work quite nicely on consoles and I'd like to use an engine/framework that has the possibility for a largely pain-free porting process to consoles) tl:dr; So, my question is this: Is there any proven way to get a Phaser game (or some similiar HTML5 framework) ported to console? Or is there something else I'm missing that would satisfy my needs? thx guys
  10. Mouse is down for moble

    I have been looking for a solution for a while now! the idea is to move the zombies to the point i hold the mouse in and stop when i release the mouse, this is my movement code: //check mouse down if (game.input.mousePointer.isDown) { //move all zombies zombies.forEach(function(zombie) { game.physics.arcade.moveToPointer(zombie, 400); //if in box reset velocity if ( Phaser.Rectangle.contains( zombie.body, game.input.x, game.input.y ) ) { zombie.body.velocity.setTo(0, 0); } //end if }, this); //end forEach } else { zombies.forEach(function(zombie) { zombie.body.velocity.setTo(0, 0); }, this); //end forEach } //end else if (game.time.now > nextFire) { fire(); } basically what i want is to check for the same input in mobile devices, i have tried using: game.input.onDown.add(move , this); but it didn't work well for me because the zombies kept on going on that direction forever. please help:( this is the full code: http://github.com/msal4.github.io/increment/
  11. Hi All, I was trying to create numbers count up/down animation with phaser and need some help. I found this https://codepen.io/netgfx/pen/GJgVJR but when adding it to my game i am getting a lot of errors. Any idea how i can create such animation with numbers. Thanks in advance.
  12. angleToPointer on child sprite

    Hi guys, I'm trying to rotate a player's arm (anchored at the shoulder) to the mouse pointer using angleToPointer() method for aiming. I have a player sprite and a frontArm sprite. angleToPointer works as expected until I make the frontArm sprite a child of the player sprite. When I do this, the frontArm sprite will get stuck at certain points and won't rotate any further. I'm a complete newbie to Phaser and game dev so any help would be appreciated. I'll put my code below: create: function() { this.background = this.game.add.sprite(0, 0, 'background'); this.game.physics.startSystem(Phaser.Physics.ARCADE); this.player = this.game.add.sprite(200, 500, 'player', 'Fire Marshall Main_00025'); this.game.physics.arcade.enable(this.player); this.player.anchor.setTo(0.5); this.frontArm = this.player.addChild(this.game.make.sprite(-10, -240, 'frontArm')); this.frontArm.anchor.setTo(0.48, 0.30); this.game.physics.arcade.enable(this.frontArm); //walk animation this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 0, 24,'', 5), 24, true, false); this.player.animations.add('walkleft', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 24, 0,'', 5), 24, true, false); cursors = this.game.input.keyboard.createCursorKeys(); }, update: function() { //player walk movement this.player.body.velocity.x = 0; if (cursors.right.isDown) { this.player.body.velocity.x = 150; this.player.animations.play('walkright'); }else if (cursors.left.isDown){ this.player.body.velocity.x = -150; this. player.animations.play('walkleft'); }else { this.player.animations.stop(); this.player.frame = 25; } this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm); }
  13. Hello! We made an IO game called PirateBattle.io and you can play it here: http://piratebattle.io/ Mobile app version here: https://play.google.com/store/apps/details?id=com.jettigames.piratebattle IOS coming soon You are a pirate ship and you shall collect coins and shoot other ships. Coins are used to upgrade your boat. Controls: Use mouse to move Use left click to shoot Use space to boost Use 1, 2, 3 and 4 to upgrade your ship if you have enough money This game is made using Phaser, socketIO, NodeJS backend and Nginx for serving the static files. PLAY IT HERE: http://piratebattle.io/
  14. Hi guys, I just wanted to show you my latest Phaser app, Pop Pop Bubble Wrap (I know it's simple but I just wanted to get back on track, I haven't coded a Phaser app since the end of 2015). Pop Pop Bubble Wrap is an infinite bubble wrapping popping simulator designed to reduce one' stress and anxiety. You can find it here: iOS: http://apple.co/2uWzooG Google Play: http://bit.ly/2uhg6IJ Website: http://popbub.eu/ #indiedev #indiegame #gamedev #roninmobile Let me know what you think! Regards!
  15. Hello , I'm super new to Typescript , html5 , and I'm looking for some direction, so I started my first "hello world" game and I would like to know how to host it(web host). I have windows hosting through Arvixe... not sure what is required I'm using visual studio 2015 and typescript Thank you in advance Jimmy
  16. I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds. I'm using Phaser webpack example template (https://github.com/photonstorm/phaser-ce/tree/master/resources/Project Templates/Webpack) and an example from the website (https://phaser.io/examples/v2/p2-physics/pick-up-object). The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide. The game code is simple and you can check it here: /** * Import Phaser dependencies using `expose-loader`. * This makes then available globally and it's something required by Phaser. * The order matters since Phaser needs them available before it is imported. */ import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js'; import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js'; import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js'; var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png'); game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png'); game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png'); game.load.physics('physicsData', 'assets/physics/sprites.json'); } var tetris1; var tetris2; var tetris3; var mouseBody; var mouseConstraint; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 1000; tetris1 = game.add.sprite(300, 100, 'tetrisblock1'); tetris2 = game.add.sprite(375, 200, 'tetrisblock2'); tetris3 = game.add.sprite(450, 300, 'tetrisblock3'); // Create collision group for the blocks var blockCollisionGroup = game.physics.p2.createCollisionGroup(); // This part is vital if you want the objects with their own collision groups to still collide with the world bounds // (which we do) - what this does is adjust the bounds to use its own collision group. game.physics.p2.updateBoundsCollisionGroup(); // Enable the physics bodies on all the sprites game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false); tetris1.body.clearShapes(); tetris1.body.loadPolygon('physicsData', 'tetrisblock1'); tetris1.body.setCollisionGroup(blockCollisionGroup); tetris1.body.collides([blockCollisionGroup]); tetris2.body.clearShapes(); tetris2.body.loadPolygon('physicsData', 'tetrisblock2'); tetris2.body.setCollisionGroup(blockCollisionGroup); tetris2.body.collides([blockCollisionGroup]); tetris3.body.clearShapes(); tetris3.body.loadPolygon('physicsData', 'tetrisblock3'); tetris3.body.setCollisionGroup(blockCollisionGroup); tetris3.body.collides([blockCollisionGroup]); // create physics body for mouse which we will use for dragging clicked bodies mouseBody = new p2.Body(); game.physics.p2.world.addBody(mouseBody); // attach pointer events game.input.onDown.add(click, this); game.input.onUp.add(release, this); game.input.addMoveCallback(move, this); } function click(pointer) { var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]); // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)]; if (bodies.length) { var clickedBody = bodies[0]; var localPointInBody = [0, 0]; // this function takes physicsPos and coverts it to the body's local coordinate system clickedBody.toLocalFrame(localPointInBody, physicsPos); // use a revoluteContraint to attach mouseBody to the clicked body mouseConstraint = this.game.physics.p2.createRevoluteConstraint(mouseBody, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]); } } function release() { // remove constraint from object's body game.physics.p2.removeConstraint(mouseConstraint); } function move(pointer) { // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x); mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y); } function update() { } function render() { // game.debug.text(result, 32, 32); } If you need to have a look at the project, you can check it here: https://github.com/alexZalachenko/Phaser-Webpack Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  17. Hello everyone! I'm doing game dev for a while but it's more like a hobby than real business. Recently I found this game on my hdd, along with the rest of projects that I never finished, and decided to finally publish something. This is the effect of few days of refactoring my old code. The whole idea of the game is simple, you have to drag nodes around and untangle everything you see on the screen. Even if it's very minimalistic and not too original, I'm still quite happy with the final results. For the first time I'm not ashamed to show my work to someone else. There is link if you want to take a look: http://www.kongregate.com/games/nrbdch/untie I'm waiting for your feedback! If anyone is interested then I will be happy to share the source but first I would have to make it readable for other hoomans
  18. Issues making my first snake game

    Hi, I have been working on my first full game and decided to try a snake clone. I haven't followed any kind of tutorial and have just been trying to get to grips with the framework. I am however having a few issues and have been stuck for a couple of hours to try and fix a couple of annoying bugs. The first main issue I have with my game is that collisions don't seem to be firing correctly. I have tried to set one up when the head of the snake collides with any of the tail elements which just restarts the game state for testing purposes. This seems to however try to trigger another function which should only happen when a player collides with food. I am guessing I need to setup my collision handlers differently in order to fix this. The other bug is that when a bit of food has been eaten a new sprite it created but just before it does it gets added randomly to somewhere on the screen then disappears but I can't work out why that would be. I setup a git repo of my project so far on github and it can be found here: https://github.com/jaymeh/phaser-snake If someone could offer some advice as to what I can do to fix this I would be very grateful. Thanks
  19. This is the phaser multiplayer game series continuation. In this tutorial, we manage food in the server and generate them in the client like many other io games. http://gojasonyang.com/post/phaserMultiplayerGamePart4.html
  20. Hi guys, I am trying to create a Game with Ionic 2 (=> Typescript) and Phaser and so far it was fine... until that I tried to add the plugin Virtual Joystick. The line this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); return an error about undefined "game" But the comment above this line works fine ... It's maybe that I don't use the correct syntax to call a plugin ... Please Help me import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { Platform,AlertController } from 'ionic-angular'; import { Storage } from '@ionic/storage'; import { HomePage } from '../home/home'; /* Generated class for the Play page. See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ ///<reference path="js/phaser-virtual-joystick.min.js"/> @Component({ selector: 'page-play', templateUrl: 'play.html' }) export class PlayPage { score: any; scoreObj: Number; game: Phaser.Game; map: Phaser.Tilemap; balloon: Phaser.Sprite; bg: Phaser.TilemapLayer; start: Phaser.TilemapLayer; hit: Phaser.TilemapLayer; cursors: Phaser.CursorKeys; pad; stick; test; constructor(public navCtrl: NavController, public navParams: NavParams,platform: Platform,public storage:Storage,public alertCtrl: AlertController) { platform.ready().then(() => { storage.get('scores'); storage.get('level'); }); } ionViewDidEnter(){ this.score = 0; this.scoreObj = 100; var innerWidth = window.innerWidth; var innerHeight = window.innerHeight; this.game = new Phaser.Game(innerWidth, innerHeight, Phaser.AUTO, 'myGame', {create: this.create, preload: this.preload,update:this.update, render: this.render}, true); } preload(){ this.game.load.spritesheet('balloon', 'img/balloon-01.png',112,150); this.game.load.image('lest','img/sac.png'); this.game.load.image('target','img/hole.png'); this.game.load.tilemap('level1', 'img/bg-test.json', null, Phaser.Tilemap.TILED_JSON); this.game.load.image('bg-test', 'img/bg-test.png'); this.game.load.atlas('arcade', 'img/arcade-joystick.png', 'img/arcade-joystick.json'); } update = () =>{ this.game.physics.arcade.collide(this.balloon, this.hit,() => { this.balloon.kill(); this.score = this.score + 3; console.log("hit"); }); this.game.physics.arcade.collide(this.balloon, this.start); this.game.physics.arcade.collide(this.balloon, this.bg,() => { this.balloon.kill(); console.log("bg"); this.score = this.score - 1; }); this.game.input.update(); if (this.cursors.left.isDown) { this.balloon.position.x -= 5; } else if (this.cursors.right.isDown) { this.balloon.position.x += 5; } } render = () =>{ this.game.debug.body(this.balloon); } create = () =>{ /*var plugins = new Phaser.PluginManager(this.game); console.log(plugins);*/ this.pad = this.game.plugins.add(Phaser.Plugin.VirtualJoystick); this.game.physics.startSystem(Phaser.Physics.ARCADE); this.cursors = this.game.input.keyboard.createCursorKeys(); this.game.world.setBounds(0, 0, 9600,800); //MAP var map = this.game.add.tilemap('level1',9600,800,9600,800); map.addTilesetImage('bg-test'); this.hit = map.createLayer('hit'); this.start = map.createLayer('start'); this.bg = map.createLayer('bg'); //BALLOON this.balloon = new Phaser.Sprite(this.game, 192, 490, 'balloon'); this.balloon.debug = true; this.game.world.addAt(this.balloon, 3); this.game.physics.enable(this.balloon, Phaser.Physics.ARCADE); this.balloon.body.gravity.y = 15; this.balloon.body.collideWorldBounds = true; this.balloon.inputEnabled = true; this.game.camera.follow(this.balloon, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); this.balloon.animations.add('fly', [ 0, 1, 2, 3, 4, 5], 20, true); this.balloon.body.velocity.y = 10; // GAME map.setCollision([1,2,4,5],true,this.bg.index,true); map.setCollision([6],true,this.hit.index,true); map.setCollision([3],true,this.start.index,true); } }
  21. Hi there How can I have fancy particlestorm trails coming out of by sprite bullets and do collision detection? I've managed to get the basic PS emitter example working. But there is no way of getting the emitter position or doing collision detection between the emitter and another object (that I know of) I've tried to put a sprite over the emitter but it's hard to match the velocities and stop the emitter when I want to kill the bullet. I've tried to create a sprite with a render texture but nothing happens. Also tried adding the emitter as a child. I presume I need to create a sprite and attach the emitter to it but am now stuck. Any help is much appreciated and code below. Thanks! var game = new Phaser.Game(400, 300, Phaser.AUTO, 'Particles', { preload: preload, create: create, update: update, render: render }); var manager = null; var emitter = null; var object; var bullet = { image: 'bullet', anchorX : 0.8, anchorY : 0.5, vy: -8.0, scale: 0.5, rotation: -90.0, emit: { name: 'data', value: 0.07 } }; var data = { lifespan: 6000, image: 'white', scale: 0.5, blendMode: 'ADD', hsv: { initial: 0, value: 359, control: 'linear' }, vx: { min: -0.5, max: 0.5 }, vy: { min: -1, max: -2 } }; var player; function preload() { game.load.script('particlestorm', './assets/particle-storm.min.js'); // game.forceSingleUpdate = true; game.load.image('bullet', './assets/bullet.png'); game.load.image('white', './assets/white.png'); game.load.image('player', './assets/turret.png'); } function create() { manager = this.game.plugins.add(Phaser.ParticleStorm); manager.addData('bullet', bullet); manager.addData('data', data); //emitter = manager.createEmitter(); emitter = manager.createEmitter(Phaser.ParticleStorm.RENDERTEXTURE); emitter.addToWorld(); //player = game.add.sprite ( 100, 100,emitter.renderer.renderTexture); player = game.add.sprite ( 100, 100, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); player.enableBody = true; //player.addChild(emitter); } function fire(pointer) { emitter.renderer.display.visible = true; console.log ("PointerX= "+pointer.x); player.reset (pointer.x,300); player.body.velocity.y = -500; emitter.emit('bullet', pointer.x, 300); } function update(){ game.input.onDown.add(fire, this); if (player.body.y < 50 ){ player.kill(); emitter.renderer.display.visible = false; } } function render() { game.debug.text('Click to fire', 32, 32); }
  22. Tilemap issue

    Hey guys I'm new to Phaser, I looked on Youtube and phaser examples for answers but didn't find any helpful one. I get this error on the console TypeError: location is undefined[Learn More] phaser.js:97736:25 getIndex http://127.0.0.1:5000/assets/phaser.js:97736:25 getTilesetIndex http://127.0.0.1:5000/assets/phaser.js:97770:16 addTilesetImage http://127.0.0.1:5000/assets/phaser.js:97313:19 create http://127.0.0.1:5000/main.js:36:5 loadComplete http://127.0.0.1:5000/assets/phaser.js:28709:13 finishedLoading http://127.0.0.1:5000/assets/phaser.js:75801:9 processLoadQueue http://127.0.0.1:5000/assets/phaser.js:75756:13 asyncComplete http://127.0.0.1:5000/assets/phaser.js:75828:9 fileComplete http://127.0.0.1:5000/assets/phaser.js:76711:13 loadImageTag/file.data.onload http://127.0.0.1:5000/assets/phaser.js:76098:17 Here is my code: var game = new Phaser.Game(500, 400, Phaser.AUTO, "", { preload: preload, create: create, update: update }); function preload() { game.load.spritesheet( "marioSmall", "assets/images/marioSmall.png", 34, 34, 6, 1 ); game.load.image("ground", "assets/images/ground.png"); game.load.tilemap( "map_01", "assets/tileset_json.json", null, Phaser.Tilemap.TILED_JSON ); game.load.image("tiles", "/assets/items.png"); } var mario; var ground; var map; var layer; function create() { // ground = game.add.sprite(0, 370, "ground"); // game.physics.arcade.enable(ground); // ground.body.immovable = true; // mario = new Mario(100, 100, 2000, 800, 200); map = game.add.tilemap("map_01"); map.addTilesetImage("items", "tiles"); layer = map.createLayer("Tile Layer 1"); } function update() { // game.physics.arcade.collide(ground, mario.sprite); // mario.checkInput(); }
  23. Web font not shown correctly

    I added text into a sprite as child. My text could not show font correctly. Anybody could help me? My code is as follows: this.style = { font: "30px Arial", fill: "#000", boundsAlignH: "center", boundsAlignV: "top" }; ... this.textContent = this.add.text( -30, -60, "test content", this.style); ... However, what I got on test webpage was not Arial font, but as shown in attached image. Why is that?
  24. Hello, I wonder if anyone knows how to record sound from microphone input with phaser? In my project, I have to add a record button, and when user click on it, the program needs to start receiving audio stream from a microphone. After user finishes recording, by clicking on a stop button, the audio should be encoded and stored as an MP3 or other acceptable audio format file. Anyone can give a helping hand?
  25. My image will not load

    Hello guys, I'm trying to get an image in my game, but it simply will not load. There's nothing wrong with my assets. this is the error i'm getting : Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/Users/Gebruiker/Documents/school/jaar%202/kwartiel%201/project%20creative%20technology/phaser/assets/images/background.jpg may not be loaded. at PIXI.WebGLRenderer.updateTexture. Could it be the size of the image?