Newbie Question about Sprites/Preloading

[dacatchman]

Hi, I'm new to Phaser, but not game/sprite engines.  Javascript has some quirks I'm still getting used to, and perhaps this is one of them.

 

My question is this: Why do I need to assign a different 'id tag' to an image for sprites to behave as separate instances?

 

For example (preload function):

game.load.image('reel', 'reel.png');game.load.image('reel2','reel.png');game.load.image('reel3','reel.png');

Then, in my create function, I instantiate a couple custom classes (where the sprite itself resides):

 

r1 = new Reel({x:201,y:130,img:'reel',cb_stop:cb_r1_stop});r2 = new Reel({x:201+128+10,y:130,img:'reel2'cb_stop:cb_r2_stop});r3 = new Reel({x:201+128+10+128+10,y:130,img:'reel3',cb_stop:cb_r3_stop});

(class constructor where sprite resides):

s = game.add.sprite(args['x'],args['y'],args['img']);

Problem:

 

So if I do not make these 'reel','reel2','reel3' any cropping, moving, or other modifications I make to the sprite itself (yes, separate instances as they are wrapped in their own class) I make to the sprite itself will apply to all 3 sprites no matter what -- as if it's modifying the image resource, not the sprite.  As a temporary work around I just made 3 separate resources, but that can't be right, can it?

 

Sooo, I'm doing something wrong.  I'm just flying through the tutorials, so it's likely there's some other way to add/work with sprites and I'm missing it?

[rich]

Hi - What are you actually doing to the images? If you modify the source image then yes, any sprite using it would be updated, but there's really very little you can actually change that will cause this. I think crop is the only thing that would have a 'global' effect. Rotation, scaling, offsets, position, etc certainly don't.

[dacatchman]

Hi - What are you actually doing to the images? If you modify the source image then yes, any sprite using it would be updated, but there's really very little you can actually change that will cause this. I think crop is the only thing that would have a 'global' effect. Rotation, scaling, offsets, position, etc certainly don't.

 

Yep, I am cropping.  I was making a slot machine with 3 "reels" you know.  It works pretty well to just scroll through the image using crop.

 

Performance-wise, it might be superior to break it up and not "scroll" the main image.  Considering this, seems like that's the way I'll have to go.  I didn't want to get head long into converting to that methodology only to run into this issue.

 

So long as I don't crop I am good then, hm?

 

Thanks.

[XekeDeath]

You could look at using TileSprites as well.

Instead of adjusting cropping the image, you would adjust where the tiling starts from using the tilePosition.y property.

This would allow you to load the resource once, and apply it to the 3 reels.

[rich]

It's on our roadmap to make crop rects Sprite specific (rather than Image specific), but we're not quite there yet. In the meantime I think Xeke's suggestion of a TileSprite is excellent, especially as you could just keep on scrolling it and it'll wrap around smoothly too!

[dacatchman]

Oh nice, I'll check that out.  Yeah I had to make duplicate icons on the image in order to achieve the wrapping effect, so maybe this will be an even more ideal solution.

 

I'll give it a look and see what's what!

 

Not to derail this, but since topics take a while to post and it's semi related -- I come from C++ (and even python) game programming, and generally you have to explicitly render/draw your objects.  How come in Phaser all this is handled automatically?

 

I mean even using the graphics object I don't have to redraw it every frame.  Heck I don't even have a draw/render function implemented!  Kinda strange, but kinda convenient all the same -- but I guess I feel kind of naked not knowing exactly how it's happening

[rich]

Items added to the display list are rendered automatically. This is standard behaviour in Flash and most html5 frameworks, so we adopted it. You can control if an item renders or not (see the renderable property), but the actual rendering is done by the core game loop, which iterates through the objects in the order they're placed on the display list, and renders them either to canvas or webgl, depending on browser.