Creation of a jigsaw puzzle game – Flash AS3 version
Last month I published a 4 steps tutorial about the creation of a jigsaw puzzle using HTML5 Canvas and KineticJS (also see step 2, 3 and 4), and now I am going to show you Ami Hanya‘s AS3 version of the engine.
You can see it in action at this page, it was made with FlashDevelop and GreenSock for the tweening.
Ami also made game based on Toony Flash game prototype, you can find it at this page clicking on the zebra.
Back to our jigsaw engine this is the main class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
package { import com.Piece; import flash.display.Bitmap; import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; /** * ... * @author ami hanya ami@orn.co.il */ public class Main extends Sprite { private var nowbitmap:Bitmap; private var piecesArray:Array = new Array(); private var horizontalPieces:Number = 5; private var verticalPieces:Number = 4; private var imageWidth:Number; private var imageHeight:Number; private var pieceWidth:Number; private var pieceHeight:Number; private var showGuid:Boolean = true; private var showGuidCon:Sprite; private var regularCon:Sprite; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); var imageLoader:Loader = new Loader(); var image:URLRequest = new URLRequest("brave.jpg"); imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoad); imageLoader.load(image); } private function imageLoad(e:Event = null):void { nowbitmap = e.target.content as Bitmap; imageWidth = nowbitmap.width; imageHeight = nowbitmap.height; pieceWidth = Math.round(imageWidth / horizontalPieces); pieceHeight = Math.round(imageHeight / verticalPieces); if (showGuid) { showGuidCon = new Sprite addChild(showGuidCon); } regularCon = new Sprite addChild(regularCon); for (var i:uint = 0; i < horizontalPieces; i++) { piecesArray[i] = new Array(); for (var j:uint = 0; j < verticalPieces; j++) { piecesArray[i][j] = new Object(); piecesArray[i][j].right = Math.floor(Math.random() * 2); piecesArray[i][j].down = Math.floor(Math.random() * 2); if (j > 0) { piecesArray[i][j].up = 1 - piecesArray[i][j - 1].down; } if (i > 0) { piecesArray[i][j].left = 1 - piecesArray[i - 1][j].right; } var n:Number = j + i * verticalPieces; if (showGuid) { var pieceGuid:Piece = new Piece showGuidCon.addChild(pieceGuid); pieceGuid.init({image: nowbitmap.bitmapData, i: i, j: j, tileObj: piecesArray[i][j], horizontalPieces: horizontalPieces, verticalPieces: verticalPieces, crop: {x: i * pieceWidth, y: j * pieceHeight, width: pieceWidth, height: pieceHeight}, x: i * pieceWidth + i, y: j * pieceHeight + j, width: pieceWidth, height: pieceHeight, draggable: false}); } var piece:Piece = new Piece regularCon.addChild(piece); piece.init({image: nowbitmap.bitmapData, i: i, j: j, tileObj: piecesArray[i][j], horizontalPieces: horizontalPieces, verticalPieces: verticalPieces, crop: {x: i * pieceWidth, y: j * pieceHeight, width: pieceWidth, height: pieceHeight}, x: i * pieceWidth + i, y: j * pieceHeight + j, width: pieceWidth, height: pieceHeight, draggable: true}); } } } } } |
and this is Piece class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
package com { import com.greensock.easing.*; import com.greensock.*; import flash.display.Bitmap; import flash.display.Graphics; import flash.display.Shape; import flash.display.Sprite; import flash.events.MouseEvent; /** * ... * @author ami hanya ami@orn.co.il */ public class Piece extends Sprite { private var image:Bitmap; private var obj:Object private var gap:Number = 20; public function Piece() { } public function init($obj:Object):void { obj = $obj; x = obj.x; y = obj.y; var offsetX:Number = obj.width * obj.i; var offsetY:Number = obj.height * obj.j; var x8:Number = Math.round(obj.width / 8); var y8:Number = Math.round(obj.height / 8); var i:Number = obj.i; var j:Number = obj.j; var tileObj:Object = obj.tileObj; var s:Shape = new Shape var context:Graphics = s.graphics; if (obj.draggable) { context.lineStyle(2, 0, 1, true, "round"); context.beginBitmapFill(obj.image); } else { context.lineStyle(2, 0, .5, true, "round"); context.beginFill(0xFFFFFF, .5); } context.moveTo(offsetX, offsetY); s.x = -offsetX; s.y = -offsetY; if (j != 0) { context.lineTo(offsetX + 3 * x8, offsetY); if (tileObj.up == 1) { context.curveTo(offsetX + 2 * x8, offsetY - 2 * y8, offsetX + 4 * x8, offsetY - 2 * y8); context.curveTo(offsetX + 6 * x8, offsetY - 2 * y8, offsetX + 5 * x8, offsetY); } else { context.curveTo(offsetX + 2 * x8, offsetY + 2 * y8, offsetX + 4 * x8, offsetY + 2 * y8); context.curveTo(offsetX + 6 * x8, offsetY + 2 * y8, offsetX + 5 * x8, offsetY); } } context.lineTo(offsetX + 8 * x8, offsetY); if (i != obj.horizontalPieces - 1) { context.lineTo(offsetX + 8 * x8, offsetY + 3 * y8); if (tileObj.right == 1) { context.curveTo(offsetX + 10 * x8, offsetY + 2 * y8, offsetX + 10 * x8, offsetY + 4 * y8); context.curveTo(offsetX + 10 * x8, offsetY + 6 * y8, offsetX + 8 * x8, offsetY + 5 * y8); } else { context.curveTo(offsetX + 6 * x8, offsetY + 2 * y8, offsetX + 6 * x8, offsetY + 4 * y8); context.curveTo(offsetX + 6 * x8, offsetY + 6 * y8, offsetX + 8 * x8, offsetY + 5 * y8); } } context.lineTo(offsetX + 8 * x8, offsetY + 8 * y8); if (j != obj.verticalPieces - 1) { context.lineTo(offsetX + 5 * x8, offsetY + 8 * y8); if (tileObj.down == 1) { context.curveTo(offsetX + 6 * x8, offsetY + 10 * y8, offsetX + 4 * x8, offsetY + 10 * y8); context.curveTo(offsetX + 2 * x8, offsetY + 10 * y8, offsetX + 3 * x8, offsetY + 8 * y8); } else { context.curveTo(offsetX + 6 * x8, offsetY + 6 * y8, offsetX + 4 * x8, offsetY + 6 * y8); context.curveTo(offsetX + 2 * x8, offsetY + 6 * y8, offsetX + 3 * x8, offsetY + 8 * y8); } } context.lineTo(offsetX, offsetY + 8 * y8); if (i != 0) { context.lineTo(offsetX, offsetY + 5 * y8); if (tileObj.left == 1) { context.curveTo(offsetX - 2 * x8, offsetY + 6 * y8, offsetX - 2 * x8, offsetY + 4 * y8); context.curveTo(offsetX - 2 * x8, offsetY + 2 * y8, offsetX, offsetY + 3 * y8); } else { context.curveTo(offsetX + 2 * x8, offsetY + 6 * y8, offsetX + 2 * x8, offsetY + 4 * y8); context.curveTo(offsetX + 2 * x8, offsetY + 2 * y8, offsetX, offsetY + 3 * y8); } } addChild(s) if (obj.draggable) { TweenMax.to(this, .5, {x: Math.round(Math.random() * (obj.image.width - obj.width)), y: Math.round(Math.random() * (obj.image.height - obj.height)), delay: 1 + Math.random(), ease: Back.easeInOut, onComplete: addMouseEvent}); } else { mouseChildren = false; mouseEnabled = false; } } private function addMouseEvent():void { if (obj.draggable) { buttonMode = true; addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); } } private function mouseDown(e:MouseEvent):void { startDrag(); parent.setChildIndex(this, parent.numChildren - 1); stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp); } private function mouseUp(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp); stopDrag(); x = Math.round(x); y = Math.round(y); if (x < obj.x + gap / 2 && x > obj.x - gap / 2 && y < obj.y + gap / 2 && y > obj.y - gap / 2) { x = obj.x; y = obj.y; mouseEnabled = false; mouseChildren = false; parent.setChildIndex(this, 0); } } } } |
You can also download the entire project.
Rate this post: 
(9 votes, average: 4.44 out of 5)
(9 votes, average: 4.44 out of 5)
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.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers
This post has 3 comments
Creation of a jigsaw puzzle game – Flash AS3 version – Emanuele Feronato « eaflash
[...] on http://www.emanueleferonato.com Share this:TwitterFacebookLike this:Like [...]
logan
Very nice game.
Can you help me with memory game i am creating?
I try put sound,but i cant.
Chris
Where is the fla file?