Drag a sprite to move another sprite
Needed to override the updateDrag function. controller.input.updateDrag = function(pointer) { player.x = pointer.x; // call the generic implementation: Phaser.InputHandler.prototype.updateDrag.call(this,pointer); } ...
How do I use vanilla JS to insert an mp4 video into an html document with specific dimensions, play it for 2 seconds, and then remove the node?
javascript,html5,video,phaser-framework
The messy code I pulled together that is now working: HTML: <div id="really" style="width: 800px; height: 600px; position: absolute; background-color: #000000; z-index: -1;"> <video id="yeah" width="800" autoplay> <source src="assets/intro.mp4" type="video/mp4"> </video> <audio loop autoplay> <source src="assets/background.mp3"> </audio> <ui-view></ui-view> </div> JavaScript: window.setTimeout(function () { var parent = document.getElementById("really"); var child =...
Anchor Point Adjustment
For more information about the "this" keyword in JavaScript, I encourage you to have a look at the questions that deal about this specific problem, such as this one : How Does The `this` Keyword Work? However, from the Phaser point of view, the anchor point is the anchor of...
How can I make a Phaser game automatically fill the window?
Turns out to be quite simple, you just need to run this code in a preload or create function (instead of immediately after creating a game instance, as I had been trying). this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize( true ); Note that setting this.scale.pageAlignHorizontally to true...
Apply an action to every object in group for Phaser js
You can use Group.forEach to iterate the objects in the group and call a function on them: obstacleGroup.forEach(function(item) { game.physics.arcade.collide(item, platforms); game.physics.arcade.overlap(player, item, gameOver); item.body.velocity.x = -120; }, this); ...
How to show the current time in Phaser framework?
Your example will work. However, it will check the time every update (run once for every frame), which is more computationally expensive and will probably slow down your game. Here's a solution with a timer that updates the time every second: var timeString; var timeText; function create() { var style...
How to make a 'Flash' effect over a Sprite in Phaser.js?
javascript,phaser-framework,pixi
You can use a ColorMatrixFilter on the Sprite. In Phaser, you may have to manually load in the PIXI script first: game.load.script('filter', 'js/filters/ColorMatrixFilter.js'); Use this for white: var filter = new PIXI.ColorMatrixFilter(); filter.matrix = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1]; this.game.filter = [filter]; You can also tween the matrix values if you want a smooth...
Serving static resources with Flask - running afoul of Same-origin policy
javascript,nginx,flask,phaser-framework,flask-socketio
Normally, one would set up Nginx (or some other general web server) on the "main" port, and then configure it to forward certain requests to your application server (in this case, Flask) on a secondary port which is invisible/unknown to the client browser. Flask would provide the result to Nginx...
how to find the mouse position x/y using phaser
if you want x and y position o f input game.input.x; game.input.y; if you want for mouse specifically game.input.mousePointer.x; game.input.mousePointer.y; the listener function will be like function listener () { counter++; text.text = game.input.mousePointer.x +"/"+game.input.mousePointer.y + counter + "!"; } ...
Writing fragment shaders: cannot make sense of how the uniforms are defined
javascript,glsl,webgl,phaser-framework,pixi
I'm not too familiar with Phaser, but we can shed a little light on what that fragment shader is really doing. Load your jsFiddle and replace the GLSL main body with this: void main() { gl_FragColor = vec4(vTextureCoord.x * 2., vTextureCoord.y * 2., 1., 1.); gl_FragColor *= texture2D(uSampler, vTextureCoord) *...
phaser , Circle button
javascript,game-engine,phaser-framework
i solve it by siting new PIXI.Circle(0,0,84); x and y must be x o the inner sprite not it x axis in the stage i answered it if it will be useful or someone else . ...
phaser/webgl: texture bound to texture unit 0 is not renderable
opengl-es,webgl,phaser-framework
Your graphics card probably does not support such large textures. You can query the maximum supported texture size using ctx.getParameter(MAX_TEXTURE_SIZE) or have a look here. Assuming a maximum supported texture size of 4096 is a safe bet(99%), while a lot(81%) of GPUs support 8192. Take a look at webglstats.com for...
Make a sprite behave like a rigid body in Phaser.io
You need to use the P2 Physics system that comes with Phaser. Have a look at the Phaser Examples and scroll down to the P2 section specifically. There should be plenty of examples there to get you started, then you can use the API docs to fill in the blanks.
HTML5 Canvas Flip Card Animation
javascript,html5,html5-canvas,phaser-framework,turnjs
Here's a canvas based card flip (with rotation) that I did a while back for fun. It works by scaling in just the X direction so that the card appears to be flipping. Notes about the effect: You can omit the rotations if they are not required. This effect translates...
How to set coordinates for sprite correctly in Phaser?
jquery,coordinates,phaser-framework,phaser
First, if you want to position your button according to the game size, you should probably use game.width/game.height which are more reliable. Now if you want to adapt your button's position according to the screen size, there's no magic solution. Here's a generic article about the topic for instance. You...
How to disable body bouncing back in phaser?
Sounds like you want game.physics.arcade.overlap instead of collide. collide will try and separate your sprites; overlap will just let you know that they touched. If you don't do anything in your overlap callback then the sprites will pass right through each other. I use overlap a lot more than I...
How to create adaptive games via Phaser
javascript,jquery,phaser-framework,adaptive-design
First, if you want to position your button according to the game size, you should probably use game.width/game.height which are more reliable. Now if you want to adapt your button's position according to the screen size, there's no magic solution. Here's a generic article about the topic for instance. You...
Meteor.js - add packaging for 3rd party library
node.js,meteor,phaser-framework
You need to initialise a meteor project directory with: meteor create myappname cd myappname meteor add mymeteoruser:mypackagename This is assuming you've published your package as per the linked instructions in your question. You can only add a package if you have already created a meteor app for it to go...
My sprite doesn't have a body, and game.physics.enable has no effect
Have you started P2 running? game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(sprite); Also make sure you're using a version of Phaser with P2 bundled in it....
Phaser js - How to mute sounds?
game.sound.mute = true; I've just checked and it works....
canvas - clickable, touchable rectangles that animate and play sounds
audio,canvas,multi-touch,phaser-framework
It's not so difficult when you know that the canvas is a single element containing multiple drawings. Only the canvas element itself triggers events. Each of the multiple drawings on the canvas do not trigger individual events. So to do your effect on canvas you must manually handle these tasks:...
How to pass values to phaser (Dart port) State.init() function?
I'm not exactly sure what you mean, but if you want to pass something to initialize a state, you can do that in the constructor of the state. For example your state constructor could be MapRenderState(this.map){//do something about map} Then you can do game.state.add('render',new MapRenderState(map)); game.state.start('render'); If you want to...
Why does my sprite disappear when I call shiftHSL?
Ok, I got it working. Looks like you need to call bmd.update() before calling shiftHSL.
Phaser Audio Support in Internet Explorer 11
IE11 cannot play m4a files. Well, it's a little more complex than this - it can't play them unless you have iTunes (or similar codec installing software) installed. Therefore you can't count on it working reliably for everyone. It can however play mp3s, but it depends entirely on how you...
Moving a sprite along a pre-defined path in Phaser.IO
javascript,html5-canvas,phaser-framework
Presuming you have enabled physics and have already assigned each of the coordinates in your path to regions of your stage. Moving in straight lines I would suggest Physics.Arcade.movetoXY(). The function returns the angle to the target location if you need to rotate your sprite. sprite.rotation = game.physics.arcade.moveToXY( sprite, target.x,...
how to load a image using phaser
javascript,jquery,html,phaser-framework
try to add <div id="phaser-example"></div> inside <body></body> tag <html> <head> <meta charset="UTF-8"> <title>Experiments</title> <script src="../phaser.js"></script> <script src="game.js"></script> </head> <body> <div id="phaser-example"></div> </body> </html> js: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create }); function preload() { // You can fill the preloader with...
Uncaught TypeError: Cannot read property 'Tween' of undefined Phaser.io
game.add is probably never defined so it's classified as undefined. game is obviously defined as it's passed into the function but the message is stating that it does not contain a property .add so you're unable to call a method tween of that undefined property. Therefor you're receiving this error;...
Creating BitmapData and a sprite from it and possible performance differences
javascript,html5,performance,canvas,phaser-framework
As far as I know, the thing that matters the most for performance is the size of the sprite you're drawing to the screen, no matter how you're loading or generating it before that, so these two should be performing equally well.
Cancel collision after initial detection, using phaser in js
Is it optional to destroy the particle just after the collision? If yes, do it this way, just edit the change() function like this: function change(a, b) { b.destroy(); lives--; return false; } The second parameter happens to be the particle itself, the first one is the emitter....
How to make an in-game button (with text) in Phaser?
I currently seem to have achieved more or less what I wanted (may have to tweak some values here and there but generally seems alright) with code like this class MyState { preload() { //... game.load.image('key','$assetPath/button.png'); //... } create() { Sprite temp2; temp2 = new Sprite(this.game, x, y, 'button'); BitmapData...
Javascript Functioncall Socket.io and Phaser
javascript,function,socket.io,phaser-framework
Try either: create: function(){ this.socket = io.connect('localhost:3010'); this.socket.on('startGame', function () { console.log('ShouldStartGame'); this.createActualGame(); }.bind(this)); }, Or just: BasicGame.Multiplayer.createActualGame();...
Fill Phaser TileLayer with Data
html5,html5-canvas,webgl,phaser-framework
You can call directly Phaser.TilemapParser.parseTiledJSON(), it's a static method: just build the right object and pass it as an argument.
Update function doesn't work in file in Phaser
jquery,node.js,browserify,phaser-framework
It was very funny. Thanks @drhayes // In play.js... var profile = require('./profile'); module.exports = { // other state functions... update: function() { profile.update(); } }; ...
Trying to setup Phaser and Typescript with gruntjs
javascript,gruntjs,typescript,bower,phaser-framework
You need to add a reference to phaser.d.ts: /// <reference path="phaser.d.ts"/> ...
PHP variable transfer from one page to another
javascript,php,html5,phaser-framework
Can you use browser cookie? you can save score value in cookie and access it whenever you need? Read this on how to use cookies link https://developer.mozilla.org/en-US/docs/Web/API/document.cookie To save to cookie like this: document.cookie="score=54; expires=Thu, 18 Dec 2013 12:00:00 GMT"; In PHP you can read cookie if(isset(($_COOKIE['score'])) { $score =...
How to add duration for input.ondown in phaser?
if (this.input.activePointer.duration > 10 && this.input.activePointer.duration < 25) { // do action "A" } else if (this.input.activePointer.duration > 25) { // do action "B" } Put this inside update() or wrap it in a function that you call from there. It should work for the last active pointer if you...
Which pointer object (i.e., cursor) to use when resetting game.input.onDown
javascript,cursor,reset,phaser-framework
All I had to do was implement a simple counter keeping the spacebar and pointer from getting re-assigned, like so: var game = new Phaser.Game(800, 600, Phaser.CANVAS, "game", {preload: preload, create: create, update: update}); var dude; var block; var spacebar; var gameOverText; var gameOverCounter = 0; var gameOverBool = false;...
How to reset its position back to the origin when it reach the end of frame?
javascript,jquery,html5,phaser-framework
I assume the above is just pseudo code because there are lots of little errors. But there are a number of issues with this approach. If you know what the new image needs to be in advance, then preload it up front and then use loadTexture to apply it: function...
Set the maximum and current speed of a car in Phaser
javascript,game-physics,phaser-framework,racing
The reason it stops dead is because you're moving it with velocity, not acceleration - and are setting velocity to zero in your update loop (this effectively says "stop, now!"). Remove those lines and in your call to velocityFromAngle you should feed that into body.acceleration instead of body.velocity. Here is...
Invert y axis in Phaser
Not a direct phaser feature however I do recommend that you run your in-game world coordinates the same as phaser, and simply swap the display coordinates, so instead of placing your board game pieces at say queen.position.set( 10, 10 ); it would be queen.position.set( 10, worldHeight - 10 ); From...
Adding a disabled game mode on a Phaser game
Use game.input.enabled game.input.enabled = false; //all input sources are ignored. To disable just one type of input; for example, the Mouse, use game.input.mouse.enabled = false; a gray overlay should be added manually....
Phaser: Cannot Access Variable Defined in Other Scope
Ok, here as an answer: Velocity is a property of a physics body. You should use: this._player.body.velocity.x = 150 ...
Can't add image in Phaser 2.3.0
javascript,html5,canvas,phaser-framework
this.add.image('block',100,255); should be this.add.image(100, 255, 'block'); - arguments order does matter and when the method receives a string instead of a number, things naturally don't work. In this case you have x, y and the image's key.
Phaser: this.game is undefined in the Update function
this.game.physics.arcade.collide(player, doorLayer, function() { if (hasItem) { this.game.state.start('Hallway'); //This is where I get the error } }); Notice the inner this refers to the anonymous function you are passing which clearly does not have a member named game. Ideally, rename this to something else and then use it. Now you...
How to call a function in my typescript-generated js
javascript,html,typescript,phaser-framework
getSeed a method of SpaceGen.World. You haven istantiated it as a private variable in your onload handler so there's no way to access it from an attribute handler. The simplest solution would be to create a global. But the best way is to register the handler with a script instead...
Looping sprite scrolling background
javascript,html5,webgl,side-scroller,phaser-framework
The equivalent in Phaser would be: var far; function preload() { game.load.image('imageKey', 'resources/bg-far.png'); } function create() { far = game.add.tileSprite(0, 0, 512, 256, 'imageKey'); } function update() { far.tilePosition.x -= 0.128; } ...
How to add animation to a group sprite in phaser.js?
animation,sprite,phaser-framework
I figured out my answer: enemyBullets.callAll('animations.add', 'animations', 'fly3', [0,1,2,3], 16, true); enemyBullets.callAll('play', null, 'fly3'); Tested and it works....
How to apply an action on each alive member on screen belonging to a particular group?
javascript,phaser-framework,phaser
Without testing your code myself, it seems like you are not setting the velocity of each item, but on the entire coins array. You should probably do something like: coins.forEach(function (item) { item.body.velocity.x = 0; }, this); Again, this is just something I noticed, without seeing the rest of your...
How do I take a screenshot of canvas in Phaser Framework?
javascript,html5,canvas,phaser-framework
ok you need a link when user click on it it save the screenshot var clickToSave= document.getElementById('linkeId'); function saveCanvas(link, filename) { link.href = game.canvas.toDataURL(); link.download = filename; }; clickToSave.onclick = function(){ var name = "name."+"png"; saveCanvas(this, name); }; ...
phaser js undefined variable within loading function
javascript,typescript,phaser-framework
It is hard for me to be sure about this since I do not have access to all of your code. But I think it might be a case of the classic javascript "this" problem. Try defining the methods as: preload = () => { ... } create = ()...
Phaser.js - how do I take an object out of a group?
Ok, I figured out my answer, just deactivate the body of the sprite, you don't need to take it out of the group. sprite.body.enable = false; Where 'sprite' is the name of your actual sprite. Tested and works....
Resizing a tiledmap when using phaser
javascript,jquery,phaser-framework
When you want to create your game use percent values instead fix values as below: var game = new Phaser.Game("100%", "100%", Phaser.AUTO, ''); also you can use scaleManager to tell the game to resize the renderer to match the game dimensions (i.e. 100% browser width / height): game.scale.scaleMode = Phaser.ScaleManager.RESIZE;...
Phaser set group sprites' anchor property
javascript,html5,phaser-framework
When you add items to a group they become children, and you can find them a reference to them in group.children, so you could do the following: // Create your group and add all your sprites here first var cups = game.add.group(); cups.create(x, y, 'cup1'); cups.create(x, y, 'cup2'); cups.create(x, y,...
Detecting closed loop in a 2D array pattern
javascript,arrays,html5-canvas,phaser-framework
As Dagrooms said, try to find 1(s) with only one adjacent 1. Code looks like: function isValid1(x,y){ return (foo[x-1][y] + foo[x+1][y] + foo[x][y-1] + foo[x][y + 1])>1; } function validLoop(){ for(var i = 0; i < rows; i++){ for(var j = 0; j < columns; j++){ if(foo[i][j] === 1 &&...
Uncaught ReferenceError. Phaser.io
You're getting the error because pages is defined within your create function but isn't defined anywhere else. pages doesn't exist in your arrowClicked function. To fix this, make pages a global variable by adding it alongside your var declarations at the top: ... var leftArrow; var rightArrow; var pages; Then...
Phaser: Make background screen-width instead of content-width
i use this code in my game and it work very nice without changing in position of any elements var targetWidth = 720; // the width of the game we want var targetHeight = 480; // the height of the game we want // additional ratios //Small – 360x240 //Normal...
background tileSprite is over sized
If you have (tile)sprites in the game that are too big, you can try using the scale property to manipulate their size: http://phaser.io/docs/2.2.2/Phaser.TileSprite.html#scale Here is an example of using the scale property to manipulate a sprite's size: http://phaser.io/examples/v2/sprites/scale-a-sprite Hope this helps :)...
Phaser JS + Phonegap and Ads - AdMob or iAd
cordova,html5-canvas,admob,phonegap-plugins,phaser-framework
Here is a working demo for Phaser and AdMob: https://github.com/floatinghotpot/admob-demo-game-phaser/tree/master/demo You can copy the js/admob.js to your project, and simply reference to it in your index.html...
tiled map collision in Phaser framework
javascript,html5,game-engine,phaser-framework
You're using map.setCollisionByExclusion. From the docs: "Sets collision on all tiles in the given layer, except for the IDs of those in the given array. The 'collides' parameter controls if collision will be enabled (true) or disabled (false)." (emphasis mine) If you want just the orange tile solid you should...
phaser.io multiple phaser.game instances
javascript,html5-canvas,webgl,phaser-framework
You can't currently embed more than one Phaser game in a single page unless: The games use the Canvas Renderer only, OR Each game is in its own iframe. This is because Phaser uses Pixi.js for rendering, and Pixi doesn't currently support multiple instances of its WebGL renderer....
How to add my HTML5/javascript game to my pre-made website
javascript,html5,phaser-framework
I found it easiest to upload all my game files to a separate, unneeded page (say http://example.org/gamefiles/mygame) and make sure it works there first. Then use an iframe on the page you wish to display it on. I found it helps to have a wrapper on it as well to...
Make body move at same speed in Phaser+P2 and raw P2
I solved this problem by simply using P2 separately from Phaser. I manually positioned my sprites at the location of the P2 bodies.
UIWebview open URL in mobile safari using javascript
javascript,ios,html5,uiwebview,phaser-framework
Figured it out! Just make an empty a tag somewhere on your html page that conatins the game content like: <a id="theLink" target="_blank" href="http://google.com"></a> Then "click" it using Javascript like this: document.getElementById('theLink').click(); That used in conjunction with the swift code above is working for me and the game opens the...
Phaser JS how to stop event Propagation(firing) from textButton.events.onInputDown event to game.input.onDown event?
javascript,events,html5-canvas,phaser-framework
You can add a background - transparent sprite - and use input.priorityID. The priorityID is used to determine which game objects should get priority when input events occur. For example if you have several Sprites that overlap, by default the one at the top of the display list is given...
TypeError: undefined is not a function (Phaser JS)
"In fact, collisionBlocs() is a callback function from a phaser collision events : game.physics.arcade.collide(this.sprite, blocs, this.collisionBlocs); Maybe that's the problem" That will be the problem. In JS, the value of this within a function depends on how a function is called. You pass a reference to collisionBlocs to the...
Move the sprite but don't collide with other sprites in the scene in Phaser
I P2 you have to set the Collisiongroups in contrast to arcarde. I think you have to set a collisiongroup for the sprite like that: var veggCollisionGroup = game.physics.p2.createCollisionGroup(); and then define with which other groups this group shell collide like that in the Loop: veggies.body.setCollisionGroup(veggCollisionGroup); veggies.body.collides(veggCollisionGroup); And then the...
How can I get the object on which the tween in acting inside the onComplete callback function in Phaser.io?
The first value onComplete contains is the target of the tween: tween.onComplete.add(function(sprite, tween) { sprite.kill(); }, this); The second is a reference to the Tween object itself....
Change tint on a sprite with phaser
No there's no "easy" way to do this really. The tint effect is additive across the whole image, not one colour channel. You could draw the image to a BitmapData and then use its ability to process pixels (or replace colours) to create the effect you want. But if you're...
phaser.io overlap colliders for a figth game style mortal kombat or the kind of games
Yep, it is. Here is an example Code with a small workaround: http://shin.cl/pixelperfect/main.js The other option is to set a pretty accurate polygon. There are different tools for that, but i could get pretty nasty with scaling if you are not using box2d. With kind regards, SirSandmann...
How to set keyboard key pressed event only once after pressed but not continously
A bool acting as a flip-flop switch should do the job: var flipFlop; function update() { if (cursor.up.isDown){ if (!flipFlop) { player.body.velocity.y = -200; player.animations.stop('move'); flipFlop = true; } } if (cursor.up.isUp) { flipFlop = false; } } Note that the flipFlop variable is declared outside the update loop, otherwise...
A little bit of trouble with 2D arrays in javascript
javascript,jquery,arrays,html5,phaser-framework
You haven't assigned the hovering method to the prototype of your Tile "class". Give this a try: Tile.prototype.hovering = function(mouseX, mouseY) { if((mouseX > this.x && mouseX < (this.x + this.width) && mouseY > this.y && mouseY < (this.y + this.height))) { return true; } return false; } Alternatively, you...
Display child sprite behind parent sprite with Phaser
If you need to sync a manual object to a physics based one then I would recommend you do it in the preRender method of your State. This is called immediately after the State update has finished processing, but before it renders.
setPreloadSprite not working and results in image not displaying
There's nothing wrong with your code / jsfiddle that I can see. The reason it doesn't appear is that you're not loading anything. If I add a bunch of load calls into your Preloader preload method then it fills up as normal for me as they load.
Canvas | How do I create a Y-axis trail, from an X-axis moving object
javascript,html,canvas,phaser-framework,trail
I do not know phaser, but since you are also asking for plain canvas example, here is one for that: FIFO buffer (array) You can use a FIFO buffer (first-in-first-out) or a delay-buffer. Store the x and/or y value depending on your needs to the buffer. When the buffer is...
Images as solid entities in Phaser
You can collide a Sprite against as many things as you like, but each check has to be its own collide call. So basically what you're doing above is fine (assuming 'p' is your player), but you need to make sure that your Tetris sprite and Player sprite have both...