Create a button's icon with a part of a big image? - Beleaguered Castle

[Zax]

Hello,

I'm thinking about how to make a solitaire card game standalone (just for fun).
I think each card will be a button with a specific icon but I would like the user to be able to change cards skin. Instead of having 52 image to make 52 buttons' icons, I wonder how to "clip" a large plate image to passed rect coordinates. Something equivalent to the background-position CSS property used to display sprites:

Code: Select all

background: url('myBigPicture.jpg') no-repeat 0 -25px;

For exemple, if I have this full plate of cards:

I would like to retreive a specific rectangle - the third card of the first row - in order to temporarily create a button's icon:

Thank you.

[richmond62]

This does NOT create icons for buttons using part of your image.

It DOES play with your image in such a way that you can use that image as a button displaying the card face you want:
-

[jmk_phd]

To really appreciate the cleverness of Richmond's example stack, tweak the coordinates a bit in each button script, so the card displayed matches his button's label :

For button "H" (2 of Hearts):

Code: Select all

on mouseUp
   set the hScroll of group "KARDZ" to 70
   set the vScroll of group "KARDZ" to 0
end mouseUp

For button "S" (3 of Clubs):

Code: Select all

on mouseUp
   set the hScroll of group "KARDZ" to 138
   set the vScroll of group "KARDZ" to 292
end mouseUp

To display the Queen of Diamonds, for example, try adding a new button to Richmond's stack, using the code

Code: Select all

on mouseup
   -- show Queen of Diamonds (row 3, column 12)
   set the vScroll of group "KARDZ" to (3-1)*97.33
   set the hScroll of group "KARDZ" to (12-1)*69.27
end mouseup

If I recall correctly how to play Solitaire, any of the 52 cards can come up in any order -- i.e., any row between 1 and 4 paired with any column between 1 and 13. Of course, because each card can come up only once, it's a little more complicated than just randomizing the row and column when each new card is drawn.

jeff k

[richmond62]

tweak the coordinates a bit

That's a good idea as my numbers were 'a bit off.'

[stam]

interesting thread - how easy is it to resize the cards this way?

[jmk_phd]

how easy is it to resize the cards this way?

Richmond may be able to tell us whether/how this can be done. But as a practical matter, at least in this case I'd question whether it's worth doing. In the plate image that Zax provided as a .png, each card is 69x97 pixels, so when scaled to 200% these already look rather nasty (pixelated).

While learning to employ SVGs in LiveCode not long ago, I ran across a LC project posted by Paul McClernan on GitHub in which a demo stack displays in sequence the entire deck of 52 playing cards rendered as SVGs. (These whiz by at 1 millisecond per card, but if you slow this down to 500 milliseconds per card, you can see that the images are very impressive and resize flawlessly.) The main point of the demo is to illustrate the utility stack he created, which (in his words) "converts multiple SVG files into a script only library stack that loads an Array of pre-compiled binary SVG Data [that can] provide very fast rendering of many SVG graphics."

https://github.com/PaulMcClernan/OpenXT ... ayLibMaker

Depending upon what Zax has in mind for his project, SVGs might be a better choice for images that need to be resized, whether he employs Paul's strategy or just imports the SVGs into his project using "Import As Control".

(BTW, Paul informed me that although he'd found the playing-card images on the net, he had to convert the text -- i.e., the 1-10 and JQKA in the images -- to outlines because LC SVG doesn't yet support text.)

jeff k

[richmond62]

I think that image is pretty poor quality, and while what I demonstrated as a way to display bits of it works, were I making a card game I would use 52 bigger, individual playing card images, which are readily available online.

[Zax]

Thank you very much for all your interesting answers

You're right stam: I have planned to have the deck to be automatically resized when the stack is resized by the user. I don't know how to do that with Richmond's example stack (setting the hscroll and vscroll of a group).
Concerning the bad quality of my posted png deck, it was only for demo purpose. I will use a much bigger cards image for my project.

Now, for the PaulMcClernan's project, I don't understand which stack I have to download to test. I never used SVG stuff.

To be more accurate, "Solitaire" is just a generic name: I would like to create a Beleaguered Castle card game. I will have to manage manual card movements and grab command seems to be OK with Richmond's example stack.

[stam]

Well you would need quite a large image - and if reskinning then multiple images which would add to the size of the final app.

There are many free svg images of playing cards which have the advantage of being endlessly resizeable without taking much space.

While I understand the attraction of having just one image, I wonder whether this becomes a bit too difficult to manage and personally would have gone down the route of svg images (you could for example store the “skin” of the entire deck as a custom property array of svg images). And there isn’t much difference between using images or buttons for your purpose I don’t think.

Either way, do share your progress and final app!

[richmond62]

Look no further:

https://commons.wikimedia.org/wiki/File ... s_deck.svg

for a vector image of ALL the cards as one image.

With a bit of work you can have a full set of individual cards as SVG images:

https://commons.wikimedia.org/wiki/File ... pade_4.svg

[Zax]

Thanks for this links. I'll look at SVG cards.

Either way, do share your progress and final app!

Yes, but I really don't know at this time if I will have enough time and will to complete this project. It will mainly depend on difficulties I'll encounter, and I'll certainly post here for more help

[richmond62]

Oh, look: Nice Uncle Richmond has . . . .
-

[richmond62]

Yo! That was a load of rubbish: all the number cards imported as blanks, and all the people cards
imported without half their imagery.

I am attaching the original SVG files, but they are not going to be much use I am afraid.

Presumably that is because they contain embedded font glyphs.

Therefore, for them to work (as scaleable SVG files) inwith LiveCode, they will have to be
imported into Inkscape, traced and exported as image-only SVGs.

ALSO: added fun:
-

-

-
The left-hand image is the SVG file, the right-hand image is the SVG file
having been converted into a PNG image using an external editor (GIMP).

[richmond62]

-
The red Queen is a direct SVG-PNG conversion, while the black Queen has had a white background added after conversion.

[jmk_phd]

I still must agree with stam (and myself) that SVGs are far preferable to .png images.

As Richmond found -- and I'd mentioned previously regarding an email exchange with Paul McClendon -- LC does not currently handle font glyphs, so that in SVGs of playing cards on the net these elements need to be rendered as outlines (using Inkscape or AI) then the modified SVGs resaved. But why "reinvent the wheel" when Paul has already done this work for us? (As I understand his very generous GPL license, these are available for us to access and use.)

I've created a stack modeled upon Paul's code that displays the SVGs that he encoded into a script-only LC stack. Once you load the script-only stack into the mainstack, you need only specify the array key for a given playing card to display it at three different sizes, which look so much nicer than do resized bitmap images. His array keys are named sensibly: e.g., QD for "Queen of Diamonds" or 7H for "Seven of Hearts."

jeff k

SVG_CardDemo.zip

(97.88 KiB) Downloaded 74 times

Edit (08-08-2022):
It's important to note that Paul used playing cards only to illustrate how his "SVGCompiledArrayLibMaker.livecode" utility can be used to create a script-only library stack that encodes any number of SVGs in an array. So, for example, if the game that Zax intends to create employs images different from the conventional playing cards, Paul's utility can create a library stack from any set of SVGs. The script-only stack that includes the playing-card SVGs (which is what needs to be loaded into the demo) is named SVGPlayingCardDeck.livecodescript. His entire package can be downloaded at

https://github.com/PaulMcClernan/OpenXT ... master.zip

jeff k