Drawing multiple sprites

[Wolfsbane]

Hi Panda's,

How would I draw multiple sprites?

So I have a Card Deck object, and I'm using just a card sprite as the mask. When the deck is clicked, the deck 'deals' cards, etc.

But I want to draw multiple card sprites depending on how many cards I have in my deck. E.g. in a typical language, it might look like this:

//simulate drawing a stack of cards.
for ( var i = 0; i < cardList.length; i++ ) {
   drawCardSprite(x+i,y+i);
}

But this doesn't seem to be as straightforward in Panda? Or: I'm missing something really obvious.

What I've ended up doing is creating new Sprite() for every item on that stack. So Deck Card object actually has 40 card sprites created and added to the scene.

This feels unnecessary, and (because of the way I coded it) ended up being quite ugly. I feel like I'm doing it wrong.

How should I be doing it? I have a feeling it should look a little something like: I only should only assign 1 Sprite for for the deck, and then I would override some kind of render/draw method for this sprite, where I would add some custom drawing code? Is this about right?

Thanks!

D

[pstrejczek]

I have a moving starfield in my game. I just created a star class which contains sprite and I pass all the parameters (position, size, speed etc.) in the constructor. Everything is set up in the constructor and the star movement is handled by the class update function. Then I create instances of this class in a loop and put them in an array because I reuse them if they fell off the screen.

The whole code which handles my starfield fits in about 60 lines of code.

I think you could use a similar approach.

[Wolfsbane]

Thanks for the reply! I am actually doing something similar to that, but I guess you could say I'm use to coding in a certain way, (And certain tasks are easier to code that way).

Take this for example. I have a deck of 40 cards. So if we create 40 instances of the back-facing card sprite. Now: When I click the deck, I have to 1: deal 6 face upcards, and then 2: Read through the top 6 back-facing card sprites, and remove them from the top of the deck.

This is actually what I'm doing, but it's a little more work than I feel should be required. Because their function is purely display, I should be able to just draw 40 (or x number) back-facing sprites, and no need to do this popping and deleting sprites from the top.

 

So in pseudo code: I was thinking it should look something like this.

class Deck {
    this.cardArray []
    this.sprite = "BackOfCardSprite.png";

    //@override some draw function for Sprites.
    this.sprite.draw = () {
         for ( var i = 0; i < this.cardArray.length; i++ ) { 
             drawOurSprite(x+i,y+i)
         }
    }
    
    click () {
         //remove 6 cards from our cardArray[] and put them on the playing table;

         //as we're using cardArray in our custom sprite Draw function, that will automatically get 
        //updated. So no need to pop/delete custom sprite objects.
    }   

}

 

[pstrejczek]

If I would do that, I would make a card class (containing the sprite) and would probably operate on an array of card class objects, not just the Deck. This way, you can have all your card related methods in one class and can easily respond to f.ex. clicks. Actually, your pseudocode is just what I would do, except drawing, updating and responding to clicks would be implemented in the card class. All that I have to do then is to create the card object and add it to the array. I would propably use some kind of id for the card objects, to easily search for what I need. In Panda2 sprite is an object of a Sprite class, so I don't see a much simpler way to do that.

Maybe @enpu could suggest something different - I'm still learning the engine so maybe there is some better way. Maybe it would be a good idea to add a simple card game template to available templates? 

[Wolfsbane]

Right. That would work, and it's probably a better way to do it than what I ended up doing.  But that assumes a 1-to-1 ratio between actual Cards in the Deck, and the cards that I *draw* in the deck.

But there is a utility to doing it the way I'm suggesting, it's like a visual 'trick'.

So say, the deck is just a visual display. In my pseudo code, I'm drawing every single card in the deck. But optimally, I'd only want to draw half, or even a third of the cards. (They're all stacked on top of each other, so the player doesn't know.. all they can see is that it looks like a decent stack of cards). So if there are 40 cards left in the deck, I might draw a 'stack' using 8-10 sprites. If there are 20 left, I could draw using using 6, to make it look like a smaller deck, etc. This is both for looks, and efficiency.

So the ratio of sprites I'm drawing changes depending on how many cards actually are left.

So what I have now is I actually *am* creating 40 seperate sprites, and most of them are uselessly stacked directly on top of each other. (No need for that, that's inefficient! )

[pstrejczek]

You could always set the visibility to false for the sprites which are not needed to be visible at the moment, but I understand that is not the point.

For your approach, it would be probably more efficient to create and draw the sprites dynamically according to the situation in the game and then destroy them when not needed. Or maybe create placeholders for a maximum amount of cards which is possible and only set correct texture and/or visibility if needed. This is doable, but I can't imagine at the moment a simple method to do this with a minimum amount of code. 

What I would do - If there is no need for the player to know the precise amount of available cards in the deck by looking at the deck - I would create f.ex. 4 deck textures and change them in the single deck sprite according to the amount left in the deck to let the player have an image of how many cards are left (a lot -> a little less than a lot -> not too much -> one card). I know this is a hack, but it's easy to implement