suggestions : dataURI & infinite world

[jerome]

Hi,

 

I have two feature suggestions for future Phaser version :

 

dataURI : the ability to declare image resource from dataURI (http://en.wikipedia.org/wiki/Data_URI_scheme).

This would be efficient to embed small image files (sprites, tiles) in the code and improve slow connection latency problems

something like :

var imageData;imageData.encoding = "base64";    // default valueimageData.mime = "image/png";    // default valueimageData.data = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P";game.load.image('myImage', imageData); // same syntax as usual or something else

infinite world : something like a "looping" word

say, a world sized to 1000 x 1000 and when an object reachs x==1001, it sets back to x==0 (or modulo world.bound.x)

idem for Y axis

something like :

world.XLoop = true;  // default falseworld.YLoop = true;  // default false

a cylindric world (actually bi-cylindric... as spheric is quite more difficult to implement)

it would be convenient for cycling background or any needs for infinity

[paperElectron]

I agree with both of these, the first one is hitting close to home as I am trying to build an example on jsfiddle and keep banging my head against cross-site limitations.

[ivanix]

http://www.html5gamedevs.com/topic/4589-phaser-offline-how-to-do-it/

[lewster32]

infinite world : something like a "looping" word

 

This is already a feature, see World.wrap.

[ianmcgregor]

You can already use data URIs like this:

var dataURI =  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//...';

var data = new Image();

data.src = dataURI;

game.cache.addImage('image-key', dataURI, data);

[theaidem]

This is already a feature, see World.wrap.

Anybody can help me , by example (jsfiddle), how to use the method?

Thanks

[jackrugile]

@lewster32 and @theaidem,

 

I have a working example of World.wrap here: http://codepen.io/jackrugile/pen/2609e9765e4e2256f3570481555f45f8

 

However, I think the @jerome was talking more about wrapping so that you never see the seams or the jump back to the beginning. It seems like there would definitely have to be something a little complicated to get that working. For one, the camera always has to follow the player and cannot be constrained by the actual world bounds. Easy enough with game.camera.bounds = null. However, I think you'd need to somehow create copies of the current world so that you never see the transition. Something like this in this crude rendering:

 

 

At the point where the camera leaves the true world bounds, it would instantly snap back to x = 0 at the beginning of the actual world. You need the cloned worlds to make the transition smooth. This way, you could run as fast as you want to the right and never see a change, just an infinite looping world.

 

As for how you'd implement this, I have no idea

[lewster32]

For infinite scrolling wrapped worlds it's easier to move all of the objects than to have a camera and clones of the world at the leading edge - that makes everything terribly complicated. You could just continue to use the world wrapping, but put the bounds a reasonable distance outside the (now fixed) camera, so that when each game object goes offscreen and out of bounds, it reappears on the other side and comes back into view. There's no real magic bullet solution that Phaser could implement for this as it's game specific - i.e. the background may just be one or more seamless TileSprites scrolling in the opposite direction to the player's movement, bullets or projectiles fired by the player probably wouldn't want to wrap around but instead be culled at the edge of the screen, and so on.