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

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Zax
Posts: 268
Joined: Mon May 28, 2007 10:12 am
Location: France

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

Post by Zax » Fri Aug 05, 2022 3:19 pm

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:
png-clipart-playing-card-lot-playing-card-card-game-suit-standard-52-card-deck-poker-poker-cards-game-angle.png
I would like to retreive a specific rectangle - the third card of the first row - in order to temporarily create a button's icon:
cards02.jpg

Thank you.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 7586
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Create a button's icon with a part of a big image?

Post by richmond62 » Fri Aug 05, 2022 4:11 pm

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:
-
SShot 2022-08-05 at 18.09.03.png
Attachments
Playing cards.livecode.zip
Stack.
(82.73 KiB) Downloaded 11 times

jmk_phd
Posts: 160
Joined: Sat Apr 15, 2017 8:29 pm

Re: Create a button's icon with a part of a big image?

Post by jmk_phd » Fri Aug 05, 2022 7:21 pm

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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 7586
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Create a button's icon with a part of a big image?

Post by richmond62 » Fri Aug 05, 2022 8:20 pm

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

stam
Posts: 1360
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Create a button's icon with a part of a big image?

Post by stam » Sat Aug 06, 2022 1:39 am

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

jmk_phd
Posts: 160
Joined: Sat Apr 15, 2017 8:29 pm

Re: Create a button's icon with a part of a big image?

Post by jmk_phd » Sat Aug 06, 2022 6:33 am

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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 7586
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Create a button's icon with a part of a big image?

Post by richmond62 » Sat Aug 06, 2022 8:28 am

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
Posts: 268
Joined: Mon May 28, 2007 10:12 am
Location: France

Re: Create a button's icon with a part of a big image?

Post by Zax » Sat Aug 06, 2022 8:46 am

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
Posts: 1360
Joined: Sun Jun 04, 2006 9:39 pm
Location: London, UK

Re: Create a button's icon with a part of a big image?

Post by stam » Sat Aug 06, 2022 12:48 pm

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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 7586
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Create a button's icon with a part of a big image?

Post by richmond62 » Sat Aug 06, 2022 2:58 pm

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
Posts: 268
Joined: Mon May 28, 2007 10:12 am
Location: France

Re: Create a button's icon with a part of a big image?

Post by Zax » Sat Aug 06, 2022 3:24 pm

Thanks for this links. I'll look at SVG cards.
stam wrote:
Sat Aug 06, 2022 12:48 pm
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
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 7586
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Create a button's icon with a part of a big image?

Post by richmond62 » Sat Aug 06, 2022 3:32 pm

Oh, look: Nice Uncle Richmond has . . . .
-
Goodies.jpg
Attachments
Playing CardsX.livecode.zip
Stack.
(53.39 KiB) Downloaded 7 times

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 7586
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Create a button's icon with a part of a big image?

Post by richmond62 » Sat Aug 06, 2022 6:28 pm

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:
-
SShot 2022-08-06 at 20.31.46.png
-
SShot 2022-08-06 at 20.36.25.png
-
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).
Attachments
deck.zip
Deck of SVG cards
(132.85 KiB) Downloaded 7 times
Last edited by richmond62 on Sat Aug 06, 2022 7:22 pm, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 7586
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Create a button's icon with a part of a big image?

Post by richmond62 » Sat Aug 06, 2022 7:22 pm

SShot 2022-08-06 at 21.20.28.png
-
The red Queen is a direct SVG-PNG conversion, while the black Queen has had a white background added after conversion.
Attachments
Card Target.livecode.zip
Stack.
(22.47 KiB) Downloaded 6 times

jmk_phd
Posts: 160
Joined: Sat Apr 15, 2017 8:29 pm

Re: Create a button's icon with a part of a big image?

Post by jmk_phd » Sun Aug 07, 2022 6:34 am

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."
screenshotSVG.png
jeff k
SVG_CardDemo.zip
(97.88 KiB) Downloaded 6 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
Last edited by jmk_phd on Tue Aug 09, 2022 3:30 am, edited 1 time in total.

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”