Using BitmapData to manage a deck of cards

December 26, 2007 by Emanuele Feronato
Filed Under Flash, Game design •  

December 28th update: 2nd part online

I have already published a tutorial about BitmapData in the post Shuffle an image with BitmapData, but this time I want to show you how to manage a deck of cards using BitmapData.

Managing a deck of cards is very useful because there are tons of card games you can publish once you have a deck of cards in your library.

The first thing you need is an image with all cards like this one:

Deck of cards

The image is scaled down for blogging reasons, but you can view/download it at its original size here.

Now, with the same method seen in Shuffle an image with BitmapData, I'll cut off all cards starting from the original image.

I am publishing some raw actionscript because this is just a prototype, but a full tutorial will come shortly.

The prototype is about the simplest card game ever: you draw a card and have to say if the next card will be higher on lower than the card you have on the table.

Being a prototype it's not complete yet, but I want to share this code to you.

PLAIN TEXT
ACTIONSCRIPT:
  1. import flash.display.BitmapData;
  2. import flash.geom.Rectangle;
  3. import flash.geom.Point;
  4. import flash.filters.DropShadowFilter;
  5. var distance:Number = 4;
  6. var angleInDegrees:Number = 45;
  7. var color:Number = 0x000000;
  8. var alpha:Number = .5;
  9. var blurX:Number = 4;
  10. var blurY:Number = 4;
  11. var strength:Number = 1;
  12. var quality:Number = 3;
  13. var inner:Boolean = false;
  14. var knockout:Boolean = false;
  15. var hideObject:Boolean = false;
  16. var my_shadow_filter:DropShadowFilter = new DropShadowFilter(distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
  17. big_picture = BitmapData.loadBitmap("cardz");
  18. _root.attachMovie("table","table",_root.getNextHighestDepth());
  19. _root.attachMovie("higher","higher",_root.getNextHighestDepth());
  20. _root.attachMovie("lower","lower",_root.getNextHighestDepth());
  21. _root.createEmptyMovieClip("big_pic_obj",_root.getNextHighestDepth());
  22. big_pic_obj.attachBitmap(big_picture,_root.getNextHighestDepth());
  23. big_pic_obj._visible = false;
  24. pictures = new Array();
  25. sequence = new Array();
  26. Array.prototype.shuffle = function() {
  27.     for (x=0; x<52; x++) {
  28.         var from = Math.floor(Math.random()*52);
  29.         var to = this[x];
  30.         this[x] = this[from];
  31.         this[from] = to;
  32.     }
  33. };
  34. for (x=0; x<52; x++) {
  35.     card = _root.createEmptyMovieClip("small_pic_obj_"+x, _root.getNextHighestDepth());
  36.     sequence[x] = x;
  37.     small_picture = new BitmapData(79, 123);
  38.     card.attachBitmap(small_picture,_root.getNextHighestDepth());
  39.     small_picture.copyPixels(big_picture,new Rectangle(0+(x%13)*79, 0+Math.floor(x/13)*123, 79, 123),new Point(0, 0));
  40.     card._visible = false;
  41.     card.filters = new Array(my_shadow_filter);
  42.     card.onEnterFrame = function() {
  43.         switch (this.action) {
  44.             case "come" :
  45.                 this._x += 40;
  46.                 if (this._x>210) {
  47.                     this._x = 210;
  48.                     this.action = "stay";
  49.                 }
  50.                 break;
  51.             case "move" :
  52.                 this._x += 20;
  53.                 if (this._x>310) {
  54.                     this._x = 310;
  55.                     this.action = "dissolve";
  56.                 }
  57.                 break;
  58.             case "dissolve" :
  59.                 this._alpha -= 4;
  60.                 if (this._alpha<0) {
  61.                     can_draw=true;
  62.                     this.removeMovieClip();
  63.                 }
  64.                 break;
  65.         }
  66.     };
  67. }
  68. sequence.shuffle();
  69. cards_drawn = 0;
  70. can_draw = true;
  71. draw_card();
  72. higher.onRelease = function() {
  73.     if(can_draw){
  74.         can_draw=false;
  75.         draw_card();
  76.     }
  77. };
  78. lower.onRelease = function() {
  79.     if(can_draw){
  80.         can_draw=false;
  81.         draw_card();
  82.     }
  83. };
  84. function draw_card() {
  85.     _root["small_pic_obj_"+sequence[cards_drawn]]._x = 0;
  86.     _root["small_pic_obj_"+sequence[cards_drawn]]._y = 30;
  87.     _root["small_pic_obj_"+sequence[cards_drawn]]._visible = true;
  88.     _root["small_pic_obj_"+sequence[cards_drawn]].action = "come";
  89.     _root["small_pic_obj_"+sequence[cards_drawn-1]].action = "move";
  90.     cards_drawn++;
  91. }

and the result is...

I think simple and stupid games like this one can have a good replay value if I provide a high score table like in Christmas Couples, another simple game that entered in the "million games played" club.

But I will talk about it in the next post about the experiment, meanwhile take the source code.

Read 2nd part

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

6 Responses to “Using BitmapData to manage a deck of cards”

  1. David on December 26th, 2007 8:33 pm

    this is amazing, can’t wait for the tutorial!

    thanks for all the help you’ve given!

  2. styxtwo on December 26th, 2007 10:03 pm

    damn you got 1.000.000+ on christmas couples :o.
    lucky you ^^

  3. Thomas on December 27th, 2007 4:37 am

    Good Idea :D!

  4. shiv on December 27th, 2007 7:04 pm

    nice.
    ^_^

  5. RJ on December 28th, 2007 1:14 pm

    Interesting,how’s Tileball going?

  6. stupid on December 29th, 2007 7:26 pm

    Lol I bet you got most of those plays on Christmas Couples from Mindjolt.com

Leave a Reply