TCG Card Game

I am making a card game based on a real world TCG. I started this project several years ago with RealBasic but never got around to really working on it beyond a basic card library window that show the available cards in the game.

I did experiment with each card spot having its own canvas control but that won’t work if I want to animate the cards moving from the hand to its spot on the field and to other spots on the field.

I need some help with how to implement objects in a Canvas that are trackable by the game engine. Animation of the cards moving to their proper spot on the filed would be nice but I need to start somewhere.

The field has 30 card spots plus cards in each players hand. I’m not too sure where to being.

I was looking at this GridCanvas control that someone wrote a few years ago but was wondering if anything new has come around that would be better or make my job easier.

I’m not looking to do anything beyond a card moving from the players hand to the field and cards changing from a vertical to horizontal position and certain card flipping face-up or face-down.

The biggest issue I see is the player’s hand since I want the cards to get closer together or father apart depending on how many cards are in the hand and rise up slightly if the player hovers over the card.

I just need some advice or code to get started.

I had an old thread about this in the RealBasic forums which is still on the first page of threads in the Game section.

A good start might be the excellent tutorial on using the canvas at https://alwaysbusycorner.wordpress.com/page/2/?s=canvas

Jim

Thanks, it looks like it might be just what I need.

here is what I did for a Solitaire I wrote a long time ago.

  1. Do NOT draw the hands directly in the Canvas Paint event… use an off screen Picture object
  2. create a CARD class, where each instance can draw “itself” given a destination (see #1), and position
    This encapsulates all you “card” logic (my solitaire also have a “face-down” flag… )
  3. update picture object only when most of the cards are going to be static for a while
    myCard(17).Draw(g,x,y)
  4. in canvas Paint event do
    4a) draw picture object to Canvas (this provides 90% or more of you screen)
    4b) if you have moving cards (dealing, pick and move etc)… draw THIS in the Paint event over the top of (4a)

There is a lot more to implementing this of course but that is the basic idea.

In the Solitaire program when the user picked up a stack of cards …the cards picked up became image for step 4b

The Canvas Tutorial is helping a lot but in Tutorial 6 the animation is not working on OS X. On OS X, it only refreshes the canvas at the end of the animation steps and doesn’t refresh after each new frame. It’s supposed to animate when you right click on an Element in the Canvas but on OS X, all I get is the end result with nothing in-between. If I try to slow the animation down, all I get is the beach ball until it refreshes the canvas at the end of the animation. I am assuming I need to put some of the code in a Thread but I am not sure. Any ideas?

The animation is not critical but I want my game to feel like a computer card game with the card moving to their spot on the field.

The other problem I see is how to handle when a card from the hand (bigger image) is moved onto the field and the card needs to shrink down to 60x88 and possibly flip over as it moves into place.

I think starting with 10.9 Refresh() doesn’t work inline any more. Tutorial 6 runs the animation with a tight loop so no redrawing happens until execution returns to the event loop. Instead you’ll need to refactor using a Timer to trigger each animation step and allow redrawing. And I think it’s better to use Invalidate but I don’t know why:)

Change the REFRESH to INVALIDATE … not that it will solve the problem you see… but it is a better thing to do

REFRESH says repaint NOW… which is ok in some situations, unless another REFRESH comes along before the paint event completes.
INVALIDATE says to repaint ASAP, allowing the system to decide, and 1000 Invalidates in a row updates the canvas once or twice, while 1000 Refreshes in a row refreshes it 1000 times.

I can’t find those tutorials to look at them up close, but I have written card games with full animation using RealStudio/Xojo and the movement is seamless and fast… and I rarely need to use timers

You’re right. I just retested and what I said above about Refresh() no longer being inline is wrong.

For quick codings I’d use Refresh in loops but it stopped working inline at some point. I even made a project to confirm it, which I’ll need to dig up and see what was going on because Refresh() does work immediately. (very confused right now)

How do you animate without a Timer?

Found my “tight loop refresh” project and it appears to have some sorta corruption. It still opens and demonstrates Refresh not updating but copying the code to a new project Refresh works. !? sorry for the noise.

Did it run out-of-the-box for you? I had to make several changes to get it running and the pictures are just white blocks. That was enough to look at the flow and see that the Canvases Graphics property was being drawn to. You’re not supposed to do, only use the g parameter in Paint().

Anyways, in ABCanvas.DrawMe change
self.Graphics.DrawPicture pBuffer,x,y,w,h,x,y,w,h
to
self.Refresh

Refresh triggers Paint which is already setup to drawPicture pBuffer so it does the same thing and will show the animation.

[quote=79121:@Will Shank]Did it run out-of-the-box for you? I had to make several changes to get it running and the pictures are just white blocks. That was enough to look at the flow and see that the Canvases Graphics property was being drawn to. You’re not supposed to do, only use the g parameter in Paint().

Anyways, in ABCanvas.DrawMe change
self.Graphics.DrawPicture pBuffer,x,y,w,h,x,y,w,h
to
self.Refresh

Refresh triggers Paint which is already setup to drawPicture pBuffer so it does the same thing and will show the animation.[/quote]

The animation shows now but the images leave a trail.

I had to make a couple of changes as the the folder paths were set up for a Windows system so I changed it to make it universal.

In the LoadMe Method I changed the paths to the following:

' some Comics LoadType 1, GetFolderItem("").Child("COMIC").AbsolutePath , 0,0 ' some CDs LoadType 2, GetFolderItem("").Child("CD").AbsolutePath, 17,4 ' Some DVDs LoadType 3, GetFolderItem("").Child("DVD").AbsolutePath, 0,2
This allows the images to work in OS X.

Change AbsolutePath to NativePath to maintain future compatiblity.

Thanks.

Any idea on how to stop the images from leaving a trail?

That would explain why AbsolutePath didn’t appear when I pressed the Tab button. I was only following the advice someone’s else post in the Canvas Tutorial blog.

Edit: Looks like NativePath doesn’t work and all I get is a blank canvas.

Edit 2: I double checked and I modified the wrong code which is why I was getting a trail. That’ll teach me not to do coding while I’m tired. Still can’t figure out the NativePath thing.

I am trying :

 LoadType 1, GetFolderItem("").Child("COMIC").NativePath , 0,0

but upon debugging I noticed that the “/”, “” or “:” depending on your OS is not being added to the end of the string so it is trying to load /COMICMask.png instead of /COMIC/Mask.png. Am I doing it wrong?

LoadType is working with a string to represent the file, I’d change it to use a FolderItem and it should be less finicky. Change these lines and the marked Parameter.

[code]Sub LoadType(tmpType as integer, Folder as Folderitem //<<<<, InnerX as integer, InnerY as integer)

’ preload the mask and glow
f = Folder.Child(“Mask.png”) //<<<
tmpPicMask = f.OpenAsPicture
f= Folder.Child(“Glow.png”) //<<<
tmpPicGlow = f.OpenAsPicture

all = Folder //<<<
if all <> nil then
for a = 1 to all.Count //<<<

…[/code]

Call it with the Folderitem, not a path

LoadType 1, GetFolderItem("").Child("COMIC"), 0,0

Also, “for a = 1 to all.Count” is unrelated to this path problem but it was “for a = 0 to all.Count - 1” which crashes for me.

Also, what OS are you using Charles? I’m on Mac and haven’t seen any trail issues yet.

I changed the wrong line of code which caused me to have trail issues. Once I changed to right line, the trails stopped.

[quote=79261:@Will Shank]LoadType is working with a string to represent the file, I’d change it to use a FolderItem and it should be less finicky. Change these lines and the marked Parameter.

Also, “for a = 1 to all.Count” is unrelated to this path problem but it was “for a = 0 to all.Count - 1” which crashes for me.[/quote]

Thanks.

As for the

for a = 0 to all.Count - 1

issue, that is related to a change in RealBasic 2011. If you use RealBasic 2011 or later you have to change the code to

for a = 1 to all.Count

or there will be a problem. The author of the Canvas Tutorials was using the 2007 version of RealBasic when designing these tutorials.

Thanks for all the help. I have another question. On my game field, each player’s hand will be on the same Canvas as the card in play but quite a bit bigger. When a card is moved from a player’s hand and onto the field, I need it to shrink as it moves and possible rotate and/or be flipped face down where the card has a back image. How would I go about implementing something like that?