{"id":6523,"date":"2007-03-13T15:05:00","date_gmt":"2007-03-13T15:05:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2007\/03\/13\/coding-a-euchre-game-part-2-show-me-the-cards-matt-gertz\/"},"modified":"2024-07-05T14:49:29","modified_gmt":"2024-07-05T21:49:29","slug":"coding-a-euchre-game-part-2-show-me-the-cards-matt-gertz","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/coding-a-euchre-game-part-2-show-me-the-cards-matt-gertz\/","title":{"rendered":"Coding a Euchre Game, Part 2: Show me the cards! (Matt Gertz)"},"content":{"rendered":"

Coding a Euchre Game, Part 2: Show me the cards!<\/span><\/font><\/font><\/font><\/h2>\n

In my previous post, I discussed using control-drag to speed up the design of a form which uses lots of similar controls.  <\/span>In this post, I\u2019m going to discuss displaying images on those controls.<\/font><\/p>\n

Now, the face of each card is going to need an image, and you\u2019ll also need one image for the back of the card (which you can use for any of the cards).  <\/span>This is where I\u2019m afraid you\u2019re going to have to leverage your own artistic talents, unless you can find some “free” cards.  <\/span>For VBEuchre, I used Paint.exe to design each card by hand, because I couldn\u2019t find a set of card images which weren\u2019t copyrighted — I’ve attached a few examples to this post.  (<\/span>Before you get too impressed, I should mention that there was a lot of copy\/paste involved in making those images!) At any rate, what I ended up with were a set of vertical card images for each of the 24 cards in a Euchre deck, plus the card back \u2013 25 images in total.  (All will be made available to you when I post the final code.)<\/font><\/p>\n

The cards need to go into the resource manager.  <\/span>So, bring up the resource manager (hereafter referred to as the RM) by right-clicking on the project and choosing \u201cProperties,\u201d then clicking the Resources tab.  <\/span>In the upper-left corner of the resulting RM, there will be a dropdown control currently set to \u201cStrings.\u201d  <\/span>Change that to \u201cImages,\u201d so that you can see any images in the project.  <\/span>Adding images into the RM is really easy; just click the dropdown arrow next to \u201cAdd Resource,\u201d choose \u201cAdd Existing Resource,\u201d and multiselect the image files.  <\/span>Once you press OK, they\u2019ll be added to the resources. <\/font><\/p>\n

You\u2019ll want to make sure that the images are embedded in the assembly itself, so that when you deploy the app, you don\u2019t have to deal with a bunch of separate files.  <\/span>You can multiselect the images and verify that their \u201cPersistence\u201d property is set to \u201cLinked at compile time\u201d to accomplish this.<\/font><\/p>\n

Now, you\u2019re going to want to have a consistent naming scheme for the cards so that it\u2019s easy to find them in the RM.  <\/span>I chose CARDFACE<\/b>rank<\/i>Of<\/b>suit<\/i> (e.g., CARDFACEJackOfClubs) for the face-up cards and CARDBACK<\/b> for the image which represents the back of the cards.  <\/span>This makes it really easy to load the image for a given face-up card by using this helper function in my EuchreCard class:<\/font><\/p>\n

    <\/span>Public<\/span> Function<\/span> GetImageResourceName() As<\/span> String<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> FileName As<\/span> New<\/span> StringBuilder()<\/span><\/p>\n

        <\/span>FileName.AppendFormat(“CARDFACE{0}Of{1}”<\/span>, Rank, Suit)<\/span><\/p>\n

        <\/span>Return<\/span> FileName.ToString<\/span><\/p>\n

    <\/span>End<\/span> Function<\/span><\/span><\/p>\n

 <\/font><\/p>\n

which I later leverage from my EuchreDeck\u2019s constructor (using the enums Suits<\/b> and Ranks<\/b> defined on the EuchreCard<\/b> class, and where Cards<\/b> is an member array of type EuchreCard<\/b>):<\/font><\/p>\n

        <\/span>    <\/span>Dim<\/span> NewSuit As<\/span> EuchreCard.Suits<\/span><\/p>\n

            <\/span>Dim<\/span> NewRank As<\/span> EuchreCard.Ranks<\/span><\/p>\n

            <\/span>Dim<\/span> n As<\/span> Integer<\/span> = 0<\/span><\/p>\n

            <\/span>For<\/span> NewSuit = EuchreCard.Suits.Spades To<\/span> EuchreCard.Suits.Hearts  <\/span><\/span><\/p>\n

                <\/span>For<\/span> NewRank = EuchreCard.Ranks.Nine To<\/span> EuchreCard.Ranks.Ace<\/span><\/p>\n

                        <\/span>Cards(n) = New<\/span> EuchreCard(NewRank, NewSuit, Table)<\/span><\/p>\n

                        <\/span>Cards(n).im = _ My<\/span>.Resources.ResourceManager.GetObject(Cards(n).GetImageResourceName())<\/span><\/p>\n

                        <\/span>n = n + 1<\/span><\/p>\n

                <\/span>Next<\/span> NewRank<\/span><\/p>\n

            <\/span>Next<\/span> NewSuit<\/span><\/p>\n

 <\/font><\/p>\n

You\u2019ll note that I\u2019m using the GetObject() call on the RM to retrieve the card \u2013 this is because I\u2019m constructing the card\u2019s image name in code.  <\/span>For a static name, such as CARDBACK, it\u2019s even simpler than that to initialize the card back member image, thanks to the automatic friend properties that we generated for resources:<\/font><\/p>\n

            <\/span>EuchreCard.CardBackImage = My<\/span>.Resources.CARDBACK<\/span><\/p>\n

Cool, no? I also know that I\u2019ll be showing tooltips for my cards, so I create a bunch of string resources in the RM named CARDNAME<\/b>rank<\/i>Of<\/b>Suit<\/i> (e.g., CARDNAMEJackOfClubs having the value \u201cJack of Clubs\u201d) to prepare for that.  <\/span>(The RM supports cutting and pasting text, which makes this go fairly quickly.)<\/font><\/p>\n

Now, you\u2019ll note that I only specified one image per card, despite the fact that the orientation of the card will change over the course of the game.  <\/span>I don\u2019t want to have a separate image for both horizontal and vertical \u2013 that would waste memory, and actually I’d need four images anyway because I want the cards to have the correct perspective relative to the owner of the card.  <\/span>Instead, I\u2019ll create a property on EuchreCard to return the current orientation of the card, as well as set it based on the different from it\u2019s *last* orientation.  <\/span>In the following code, EuchrePlayer.Seats<\/b> is an enum which specifies the owning player (and hence a desired orientation for the card), im<\/b> is a EuchreCard<\/b>\u2019s member image of the card face, and the code just determines the difference in 90-degree increments from the current orientation and rotates the image accordingly using RotateFlip:<\/font><\/p>\n

    <\/span>Public<\/span> Enum<\/span> Seats<\/span><\/p>\n

        <\/span>LeftOpponent = 0<\/span><\/p>\n

        <\/span>Partner = 1<\/span><\/p>\n

        <\/span>RightOpponent = 2<\/span><\/p>\n

        <\/span>Player = 3<\/span><\/p>\n

    <\/span>End<\/span> Enum<\/span><\/span><\/p>\n

 <\/span><\/p>\n

    <\/span>Public<\/span> ori As<\/span> EuchrePlayer.Seats<\/span><\/p>\n

    <\/span>Public<\/span> Property<\/span> Perspective() As<\/span> EuchrePlayer.Seats<\/span><\/p>\n

        <\/span>Get<\/span><\/span><\/p>\n

            <\/span>Return<\/span> ori<\/span><\/p>\n

        <\/span>End<\/span> Get<\/span><\/span><\/p>\n

        <\/span>Set<\/span>(ByVal<\/span> value As<\/span> EuchrePlayer.Seats)<\/span><\/p>\n

            <\/span>If<\/span> ori <> value Then<\/span><\/span><\/p>\n

                <\/span>Dim<\/span> diff As<\/span> Integer<\/span><\/span><\/p>\n

                <\/span>diff = ori – value<\/span><\/p>\n

                <\/span>Dim<\/span> rft As<\/span> RotateFlipType<\/span><\/p>\n

                <\/span>If<\/span> diff = -1 OrElse<\/span> diff = 3 Then<\/span><\/span><\/p>\n

                    <\/span>rft = RotateFlipType.Rotate90FlipNone<\/span><\/p>\n

                <\/span>ElseIf<\/span> diff = 2 OrElse<\/span> diff = -2 Then<\/span><\/span><\/p>\n

                    <\/span>rft = RotateFlipType.Rotate180FlipNone<\/span><\/p>\n

                <\/span>ElseIf<\/span> diff = 1 OrElse<\/span> diff = -3 Then<\/span><\/span><\/p>\n

                    <\/span>rft = RotateFlipType.Rotate270FlipNone<\/span><\/p>\n

                <\/span>End<\/span> If<\/span><\/span><\/p>\n

                <\/span>im.RotateFlip(rft)<\/span><\/p>\n

 <\/span>               <\/span>ori = value<\/span><\/p>\n

            <\/span>End<\/span> If<\/span><\/span><\/p>\n

        <\/span>End<\/span> Set<\/span><\/span><\/p>\n

    <\/span>End<\/span> Property<\/span><\/span><\/p>\n

Now the cards will appear in the correct perspective to the player who owns them, just as would happen at a real card table!  <\/span>(Those who look at my final code (which I’ll post at the end of this blog series) will note that, for the card back orientations, I just clone three extra images and rotate them to different orientations during the game initialization, and use them as necessary \u2013 a memory \u201csplurge,\u201d if you will.  <\/span>There\u2019s such a thing as being *too* clever\u2026)<\/font><\/p>\n

Now, if you\u2019ll recall from Part 1, we created a bunch of labels on the form where the cards should show up when used.  <\/span>To make life easier, I created an array in my EuchreTable form class which maps the labels to a 2D array indexed by player (left, opposite, right, player) and card position in the hand (1-5 plus the played card):<\/font><\/p>\n

    <\/span>Public<\/span> TableTopCards(4, 6) As<\/span> System.Windows.Forms.Label <\/span><\/p>\n

    <\/span>‘ (Player index, card index — final value is played card)<\/span><\/span><\/p>\n

 <\/font><\/p>\n

And then initialize it in the constructor with actual references to the labels. I was tedious about this in code \u2013 ideally, I should construct the label name to reference in the array and then look through the controls of the form to find the matching control, but that seemed rather non-performant so, in the absence of control arrays, I skipped it and just did a line for each:<\/font><\/p>\n

        <\/span>‘ Yuck.<\/span><\/span><\/p>\n

        <\/span>Me<\/span>.TableTopCards(EuchrePlayer.Seats.LeftOpponent, 0) = Me<\/span>.LeftOpponentCard1<\/span><\/p>\n

        <\/span>Me<\/span>.TableTopCards(EuchrePlayer.Seats.LeftOpponent, 1) = Me<\/span>.LeftOpponentCard2<\/span><\/p>\n

<\/p>\n

      <\/span>  <\/span>‘ Etc\u2026<\/span><\/span><\/p>\n

<\/span><\/p>\n

\n

<\/font> <\/p>\n

That’s grotesque, but I don’t actually win a lot in this case by trying to be more elegant by constructing the label’s name in a loop and then using Me.Controls.Find() to get the reference to assign to the array — in fact, I’d actually lose performance.<\/font><\/p>\n

Now we have everything we need to display cards as required by class EuchreTable.  <\/span>For example, let\u2019s set the card images for the user\u2019s hand.  <\/span>First, we\u2019ll set the cards\u2019 orientations back to that of the user, then we\u2019ll update the label on the form representing that card location to be the image of the appropriate card in the player\u2019s hand, and then we\u2019ll issue an Update command to make sure that the image gets refreshed immediately.  <\/span>(In this code, Players<\/b> is the array of EuchrePlayer objects, and TableTopCards<\/b> is a 2D array of form labels indexed by the position of the card and the player holding them.)<\/font><\/p>\n

 <\/span> <\/span>Dim<\/span> i As<\/span> Integer<\/span><\/span><\/p>\n

  <\/span>For<\/span> i = 0 To<\/span> 4<\/span><\/p>\n

Players(EuchrePlayer.Seats.Player).CardsHeldThisHand(i).Perspective _<\/span><\/p>\n

 <\/span> <\/span>= EuchrePlayer.Seats.Player<\/span><\/p>\n

 <\/span><\/p>\n

TableTopCards(EuchrePlayer.Seats.Player, i).Image = Players( _<\/span><\/p>\n

  <\/span>EuchrePlayer.Seats.Player).CardsHeldThisHand(i).GetImage( _<\/span><\/p>\n

  <\/span>EuchrePlayer.Seats.Player)<\/span><\/p>\n

            <\/span><\/span><\/p>\n

TableTopCards(EuchrePlayer.Seats.Player, i).Update()<\/span><\/p>\n

  <\/span>Next<\/span><\/span><\/p>\n

 <\/font><\/p>\n

and that\u2019s pretty much it. <\/font><\/p>\n

Next time we\u2019ll talk about timer controls, which are a very important controls to use when writing games.  <\/span>See you then!<\/font><\/p>\n

–Matt–*<\/font><\/p>\n

Euchre card images.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Coding a Euchre Game, Part 2: Show me the cards! In my previous post, I discussed using control-drag to speed up the design of a form which uses lots of similar controls.  In this post, I\u2019m going to discuss displaying images on those controls. Now, the face of each card is going to need an […]<\/p>\n","protected":false},"author":258,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,195],"tags":[101,165],"class_list":["post-6523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-matt-gertz","category-visual-basic","tag-matt-gertz","tag-vb2005"],"acf":[],"blog_post_summary":"

Coding a Euchre Game, Part 2: Show me the cards! In my previous post, I discussed using control-drag to speed up the design of a form which uses lots of similar controls.  In this post, I\u2019m going to discuss displaying images on those controls. Now, the face of each card is going to need an […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/6523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=6523"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/6523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=6523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=6523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=6523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}