Prototype of a Flash game like Meeblings
Filed Under Actionscript 3, Box2D, Flash, Game design • 6 Comments
You should all known Meeblings and the sequel, Meeblings 2.
You have to help the Meeblings (cute creatures I’d love to burn alive) reaching the exit using some special abilities.
One of such abilities attracts Meeblings when you click and hold the mouse on a special Meebling.
In the prototype you are about to see, derived from the basic HelloWorld Box2D example, there are 10 randomly placed balls with different masses.
When you click and hold anywhere on the stage, every ball in a 4 meters radius (read this post and this post too if you don’t know how to convert meters to pixels) will be attracted towards the mouse pointer.
The more the distance, the stronger the attraction.
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 | package { import flash.display.Sprite; import flash.events.Event; import Box2D.Dynamics.*; import Box2D.Collision.*; import Box2D.Collision.Shapes.*; import Box2D.Common.Math.*; import flash.events.MouseEvent; public class HelloWorld extends Sprite { var body:b2Body; var magnet:Boolean=false; public function HelloWorld() { addEventListener(Event.ENTER_FRAME, Update, false, 0, true); var worldAABB:b2AABB = new b2AABB(); worldAABB.lowerBound.Set(-100.0, -100.0); worldAABB.upperBound.Set(100.0, 100.0); var gravity:b2Vec2=new b2Vec2(0.0,10.0); var doSleep:Boolean=true; m_world=new b2World(worldAABB,gravity,doSleep); var m_sprite:Sprite; m_sprite = new Sprite(); addChild(m_sprite); var dbgDraw:b2DebugDraw = new b2DebugDraw(); var dbgSprite:Sprite = new Sprite(); m_sprite.addChild(dbgSprite); dbgDraw.m_sprite=m_sprite; dbgDraw.m_drawScale=30; dbgDraw.m_alpha=1; dbgDraw.m_fillAlpha=0.5; dbgDraw.m_lineThickness=1; dbgDraw.m_drawFlags=b2DebugDraw.e_shapeBit; m_world.SetDebugDraw(dbgDraw); var bodyDef:b2BodyDef; var boxDef:b2PolygonDef; var circleDef:b2CircleDef; bodyDef = new b2BodyDef(); bodyDef.position.Set(8, 14); boxDef = new b2PolygonDef(); boxDef.SetAsBox(80, 1); boxDef.friction=0.3; boxDef.density=0; body=m_world.CreateBody(bodyDef); body.CreateShape(boxDef); body.SetMassFromShapes(); for (var i:int = 1; i <= 10; i++) { bodyDef = new b2BodyDef(); bodyDef.position.x=Math.random()*12+2; bodyDef.position.y=Math.random()*5; circleDef = new b2CircleDef(); circleDef.radius=Math.random()/2+0.2; circleDef.density=1.0; circleDef.friction=0.5; circleDef.restitution=0.2; body=m_world.CreateBody(bodyDef); body.CreateShape(circleDef); body.SetMassFromShapes(); } stage.addEventListener(MouseEvent.MOUSE_DOWN, createMouse); stage.addEventListener(MouseEvent.MOUSE_UP, destroyMouse); } public function createMouse(evt:MouseEvent):void { magnet=true; } public function destroyMouse(evt:MouseEvent):void { magnet=false; } public function Update(e:Event):void { var dist_x; var dist_y; var distance; m_world.Step(m_timeStep, m_iterations); if (magnet) { for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next) { dist_x=mouseX/30-bb.GetPosition().x; dist_y=mouseY/30-bb.GetPosition().y; distance = dist_x*dist_x+dist_y*dist_y; if (distance<16) { bb.ApplyImpulse(new b2Vec2(dist_x/20, dist_y/5),bb.GetWorldCenter()); } } } } public var m_world:b2World; public var m_iterations:int=10; public var m_timeStep:Number=1.0/30.0; } } |
The only new, interesting line is line 78 where I apply an impulse as strong as the distance between the ball and the mouse, once I checked the player is holding mouse button and the distance from the ball and the mouse is less than 4 meters.
Look how I divide dist_x and dist_y by different numbers to balance gameplay.
This is the result:
Click and hold anywhere on the stage to attract the balls.
Next time I will use this prototype to recreate the first Meeblings 2 level, meanwhile download the source code and enjoy.
They can be easily customized to meet the unique requirements of your project.
6 Responses to “Prototype of a Flash game like Meeblings”
Leave a Reply
- Citrus Engine released for free for learning
- My epic fail with ClickBank
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a survival horror game in Flash tutorial – part 1 (4.74/5)
- Create a flash artillery game – step 2 (4.74/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 1 (4.71/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)


(10 votes, average: 4.50 out of 5)



Would it be possible to have a restart button on your demos ?
I have to reload the whole page everytime. It would lower your bandwith use.
Emanuele, you could wrap a container div around each .swf. Make a small button/div above the .swf, and with a little javascript ‘onClick’ change the container div’s sytle display to none, and the bttn txt to .
This would effectively give users a reset AND allow dial-up’s & slow processors to ‘turn off’ swf’s when they are done with them.
@Monkios: if you use firefox, get firebug, and you can do what I’ve described above to any website. display=none (off) display=block (on)
Is it difficult to have something like this, but have some of the objects unable to rotate?
for example… having some “magnetized” boxes for a platforming game.
im just making a new box2d game, id like to know how to make “donate” button
hi everyone,
check out my first box2d game just write in google minitrain game and play
controll is a little bit tricky, but as i sad, it was my firt box2d appliction
not the best, but pretty cool. let me know where your takin this, cuz meeblings gets old after like 12 minutes or so. could be prommising