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); } ...
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 =...
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...
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...
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); ...
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...
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...
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...
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 + "!"; } ...
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) *...
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 . ...
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...
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.
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...
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...
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...
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...
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...
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....
game.sound.mute = true; I've just checked and it works....
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:...
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...
Ok, I got it working. Looks like you need to call bmd.update() before calling shiftHSL.
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...
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,...
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...
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;...
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.
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....
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,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();...
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.
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(); } }; ...
javascript,gruntjs,typescript,bower,phaser-framework
You need to add a reference to phaser.d.ts: /// <reference path="phaser.d.ts"/> ...
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 =...
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...
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;...
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...
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...
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...
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....
Ok, here as an answer: Velocity is a property of a physics body. You should use: this._player.body.velocity.x = 150 ...
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.
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...
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...
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; } ...
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....
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...
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); }; ...
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 = ()...
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....
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;...
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,...
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 &&...
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...
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...
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 :)...
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...
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...
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....
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...
I solved this problem by simply using P2 separately from Phaser. I manually positioned my sprites at the location of the P2 bodies.
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...
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...
"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...
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...
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....
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...
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...
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...
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...
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.
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.
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...
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...