MorpheusZ

Thanks! What about rotation and scale? What I'm trying to accomplish here is to move a sprite from the world to a group while maintaining exactly how it looks like (position, rotation and scale) on the screen. Moving a sprite from a group to the world is easy: just assign it's position to worldPosition, rotation to worldRotation and scale to worldScale. I'm still hoping there's something built-in in phaser to do the reverse that I just haven't found yet. Otherwise my current approach of doing it manually involves inferring the position, scale and rotation based on the result of targetGroup.worldTransform.applyInverse on two different points. Something like: // Mostly untested, just a demonstration of the approach. No idea if it'll work for nested groups. function fromWorldTransform(obj, group) { let a = group.worldTransform.applyInverse({x: 0, y: 0}); let b = group.worldTransform.applyInverse({x: 1, y: 0}); let dist = Phaser.Math.distance(a.x, a.y, b.x, b.y); // Assume that scale X and scale Y are equal and are both > 0. let scale = 1 / dist; let rotation = Phaser.Math.angleBetween(a.x, a.y, b.x, b.y); // Position is more straight-forward to calculate, this part generally seems to work. let c = group.worldTransform.applyInverse(obj.position); let position = c; obj.x = c.x; obj.y = c.y; obj.scale.x = scale; obj.scale.y = scale; obj.rotation = rotation; }

well, I tried some version of this and I faced two problems: (1) the target group's transformation could change while the tween (in world co-ordinates) is in progress, which causes the sprite to land in the incorrect spot (2) I don't have control over the tweened sprite Z-order relative to the sprites of the target group I feel this problem essentially boils down to moving a sprite from one group to another without changing how it looks like on the screen, which we're now discussing in the topic below

did you figure this out? if you had to do it yourself, do you mind sharing your code :)?

I have 2 sprite groups each representing a hand of cards. Each group has its own scale, rotation and position; same for each sprite (card) in each group. I'm trying to create a smooth animation of the card moving from one hand to the other. I can calculate the local parameters (scale, rotation and position) of where the card should be in the new group, but I can't seem to find an easy way to create a tween between 2 sets of local parameters. The only route I could think of at the moment is something along the lines of: store 'sprite.world', 'sprite.worldScale' and 'sprite.worldRotation' => remove sprite from group => add sprite to temporary group => set temporary group's parameters to the stored world parameters => calculate the world parameters in the new group => tween to new world parameters => add sprite to new group and set it to its local parameters. The becomes even more difficult if the destination could potentially change during the tween. Is there an easier or a more robust way of achieving that?

probably related to https://github.com/photonstorm/phaser-ce/issues/198 I'm sticking with 2.6.2 for now

Phaser doesn't call update() when paused. Try using window.onkeydown. Something like: window.onkeydown = function(event) { if (event.keycode == 80) game.paused = true;}

could you please explain how setting the group's pivot could help? regardless of the pivot value, the small image is still centered on the top left corner of the big image

hmm.. that doesn't seem to work, or at least I'm not using it correctly. Here's how it behaves under different setups: Setup 1: group = game.add.group();bigImage = game.add.image(0, 0, 'bigImage');group.add(bigImage);// Now if I move the group (group.x = target.x; group.y = target.y;), the bigImage is somehow correctly centered around the target location.Setup 2: group = game.add.group();bigImage = game.add.image(0, 0, 'bigImage');bigImage.anchor.x = 0.5;bigImage.anchor.y = 0.5;group.add(bigImage);smallImage = game.add.image(0, 0, 'smallImage');smallImage.anchor.x = 0.5;smallImage.anchor.y = 0.5;group.add(smallImage);// Now if I move the group, the bigImage's bottom right corner touches the the target location, but the small image is correctly centered within the big image.Setup 3: group = game.add.group();bigImage = game.add.image(0, 0, 'bigImage');group.add(bigImage);smallImage = game.add.image(0, 0, 'smallImage');smallImage.anchor.x = 0.5;smallImage.anchor.y = 0.5;group.add(smallImage);// Now if I move the group, the bigImage is (-smallImage.width / 2, -smallImage.height / 2) away from the target location, and the small image is centered around the top left corner of the big image.

Is it possible to create a group and configure in such a way that any child with position (0, 0) would be the center of the group instead of its top left corner? As I add bigger sprites to the group and its size increases, things get misaligned. The manual solution seems to involve re-adjusting the positions of the object in the group every time I add/remove something to it, which is kinda ugly.

I remember seeing huge FPS drops (game would run at 5fps or so on a desktop) when creating a tilemap with a size smaller than yours (1000x1000 or so), but perhaps we both screwed up something in our setup. 10000^2 would require hundreds of MBs to keep in memory anyway, so rendering them efficiently is not your only problem, I'd say. You'll need to manually manage loading the relevant chunks of your map as the player moves around it or something.

I never managed to get VS Express for web to work well for JS. There are few extensions out there that claim they improve how VS interacts with JS, but the only one I could install on express was http://vswebessentials.com/ I recommend WebStorm over VS.

a slightly more efficient solution that does not require creating a temporary list: var getRandomSprite() = function(group) { var randomSprite = null, cnt = 0; group.forEachAlive(function(sprite) { if (sprite.visible && sprite.inCamera) { ++cnt; if (Math.random() <= 1 / cnt) { randomSprite = sprite; } } }); return randomSprite;}do that math and you'll see that each visible sprite has the same probability of being picked

If you're not using phaser physics, you can do something like: update() { sprite.position.set(game.input.mousePointer.worldX, game.input.mousePointer.worldY);}

I'm using a graphics object to draw a filled polygon. The graphics is updated in "render()" since the polygon changes shape slightly each frame. I'm doing the actual drawing semi-manually since I'm applying a custom smoothing function to the polygon. When the number of vertices of the polygon increases to hundreds, fps starts to drop. Not all the points are visible to the camera, though, but phaser is not able to make use of this given that I'm specifying all the points on the smoothed polygon in render(). The solution that comes to mind is to manually intersect the polygon with the camera's view port, eliminating all the polygon parts that are not visible. Can phaser make my life easier somehow?

Title Render gets called, but update doesn't.