We’re rewarding the question askers & reputations are being recalculated! Read more.

Hot answers tagged

39

As mentioned in the comments, their site already explains what the three systems are and what they can be used for. Arcade Physics is for high-speed AABB collision only. AABB means axis-aligned bounded rectangles; it means you have objects without rotation, and you're only checking if the image (which is a rectangle) overlaps with another image (so there'...


15

Phaser has support for two types of sprite sheet: "classic" ones, where every frame is the exact same size, and "texture atlases" which are created with the help of a third party app like Texture Packer, Shoebox or Flash CC and come with an associated json file. You load the "classic" ones with game.load.spritesheet where you must specify the width and ...


10

Valkea has the right idea, but I recommend you modify the anchor of your Sprite to what you intend - in this case, the center of the sprite. If you were using P2 or Ninja physics, this is done automatically for you, but with Arcade physics, this defaults to the top-left corner. Simply call <your sprite>.anchor.setTo(0.5); to set both the x and y ...


8

You don't need to change the parser, just the renderer. The tiles will be at the 'same' place, except the projection is different. The good news is that the good context 2d can do isometric just by setting the right isometric transform. Once you set it, just draw in a regular way (including drawImage), and all will be drawn in the isometric way !!! magic !!!...


8

I am Andreas Loew - creator of TexturePacker and PhysicsEditor. We define the export formats for our tools depending on the needs of the framework developers - in most cases we simply adapt to formats that are already available. Most of TexturePacker's data formats are template based - you can adjust it to whatever you need. We also have 3 generic data ...


6

var sprite = game.add.sprite(x, y, 'spritesheet_name'); sprite.frame = 0; Spritesheets aren't limited to animations, that's just one way to use them. An animation is just a way to display different frames at different times. By manually setting the frame of a sprite, you can display a specific part of the spritesheet.


6

What you're doing is multi-part loading assets, which is extremely common and a very sensible approach. You cannot avoid the 'pause' or black screen though, because the assets have to come down the wire at some point, right? So all you can do is make this process as attractive and seamless as possible. Either a nice preloader, or maybe showing the next part ...


5

While in theory it should be possible given that you can construct the Phaser game object with a HEADLESS renderer type, this post from one of the developers seems to suggest that that won't solve your problem, since Phaser still requires the canvas to initialize. That post was in 2013, but I don't see any obvious proof that the issue has been addressed yet ...


5

I found this in the changelog: Deprecated [...] ScaleManager.setScreenSize (see updateLayout) Try replacing your call to setScreenSize with updateLayout -- that worked for me.


5

Arcade physics, unlike P2 and most other physics engines, is a very simple and simplistic system. The former will use a lot of lay terms whereas P2 will use terms plucked straight from a physics text book. Switching between the two is not trivial; you'll need to relearn a lot of stuff. I highly recommend the P2 examples page to get a grasp of what P2's ...


5

You can solve this with some basic trigonometry. I wrote the code in Unity, but the general idea should be the same. Consider the following image: We already have P1 and P2. Here is some code to calculate the rest with comments: //Get points P1 and P2 based on circles Vector2 p1 = A.transform.position; Vector2 p2 = B.transform.position + new ...


4

Phaser doesn't have built-in support for any fancier gravity, so you'll have to roll your own. Fortunately it's fairly easy to understand, so you just calculate your own gravity in the game's update() function, which is simply a (properly scaled) vector from your player to the planet's center of gravity, and set your player's body.gravity property, or you ...


4

First of all your sprite image needs to be part of a tileset. If your sprites use individual images, you should use Tiled >= 0.10 so that you can set up a tileset as a "Collection of Images" which you then add images to individually with the + button below the tileset view. Then create an Object Layer, select the sprite you want to insert in the tileset ...


4

The top left corner of your dog asset is most probably placed at the center of your game area. In order to solve your problem, you should move the dog asset by half its height and width so it is centered on the given coordinates. Maybe something like this : var TmpImg = game.cache.getImage('dog'); game.add.sprite(game.world.centerX - TmpImg.width/2.0,game....


4

My thoughts about these two points: You could use shader blur, but that's going to be very expensive. Instead I would draw an extra border of triangles that fade from translucent in the center to transparent at the edges, to simulate the "blur". I've done that in a game of mine and it works pretty well. Here are two screenshots of a rainbow-ish booster in ...


4

I have a basic understanding of Phaser as well, but I know how to use the docs. The classes will be the classes in the Phaser.Game module. You make an instance of that at the start of your game. This is an example from my Flappy Bird game: var game = new Phaser.Game(790, 400, Phaser.AUTO, 'game', stateActions); I access the classes by game.class. The ...


4

I found out why it was not working... I needed to do this: layer.fixedToCamera = false;


3

It's just Text.width. Text objects have most the same properties as Sprites, so you can set their anchor, rotate them, etc.


3

As far as I know, phaser is 60 frames per second only, and you don't have access to the delta time. If you want to simulate 30fps for example, you could skip the update() every second frame. Read more here: http://www.html5gamedevs.com/topic/2959-how-to-set-fps-to-30/ It is therefore up to you to make sure that every frame runs within 16ms (1000 / 60) so ...


3

The idea i had when reading your post was this one : • build a set of tiles that you'll use for your areas. • render the area polygon on a small temporary canvas at the tile resolution (ex : if tiles are 16X16, render at a (16X,16X) lower resolution). • use that temporary canvas to decide wether to render tiles or not on the main canvas : if a point is set ...


3

The physics body is offset from the sprite body, causing collisions to happen to the right of the displayed sprite for the pool cue. To see what I mean, enable debugging on the P2 body by changing: game.physics.p2.enable(player); to game.physics.p2.enable(player, true); The second parameter, as specified in the documentation here (http://phaser.io/docs/2.4....


3

The usual workflow with tilemaps in Phaser is this: You make a tile map, probably in a map editor like Tiled, and export to a format that Phaser can support, like JSON. Load the tile map in Phaser. You can now draw entire layers of the map in one go - you don't have to worry about individual tiles. You can now figure out how big the tile map is by using ...


3

Phaser handles this out of the box using sorting based on the y index. I have used this exact technique too to create stacked sprites so the elements at the bottom of the screen are drawn over the ones above. https://phaser.io/examples/v2/groups/depth-sort The trick used in Phaser is to sort the z index based on the y index so the characters sprite is ...


3

So, I did some tinkering with Phaser, and found the following code to work. Basically it seems like your issue was that the state doesn't know what the variable game is. That created an issue. The issue wasn't in setting the color, the issue was that code never got called. Anyways, here's the code that worked for me. var demo = demo || {}; var stateOne = ...


3

The player should have a position, that can be any number, and a target position. When the current position is equal to the target position, check the input, and set the new target position accordingly. When the target position doesn't equal the current position (e.g. the player just started moving) move the current position closer to it. Make sure the ...


3

I disagree that you have to have a 3D map for this, and depending on how far along you are and how you implemented things, it might be a lot of work or bring other problems if you try to convert your tile or map system from 2D to 3D. On the other hand, it might be appropriate for your game and even help you with other things, but that's hard to say without ...


3

I was able to fix the problem by setting following a point instead of following my hero sprite. The core problem was the camera wasn't moving in round pixels. By making that point move in round pixels the problem was solved for both static and dynamic map layers. That combined with setting the round pixels parameter for the game cleaned up the jitter, lines, ...


2

It may be achieved by following: add a glow sprite with additive blending mode (since it was introduced in Phaser 2.0 on March 13) and combine it with masking (you can find article on PIXI about masking here). So, the workflow: - you render all your foreground objects, that need to be affected by glow to mask graphics - render background and all foreground ...


2

1.If you want something that's close to your mockup I'd use particles (It doesn't have to be a fully blown particle system). Render your particles in the form of the polygon on a RenderTexture. Make sure to use additive blending on the particles. The particles inside of the polygon will smoothly blend into each other while the particles on the outside will ...


2

The issue is this part: if (band.x > game.world.width - 64 || band.x < 64 || band.y > game.world.height - 64 || band.y < 64) { band.x = game.world.width / 2; band.y = game.world.height / 2; } band is a Group. Groups are display objects in their own right, and their children (your orcs) are positioned relative to the ...


Only top voted, non community-wiki answers of a minimum length are eligible