• *
  • Posts: 3132
Crumbles is a game I was making for the competition that ended recently. I couldn't do much because of the exam spree I went through.

There isn't much to show right now, but I decided to publish the initial version which features a neat magnifier glass. The effect is achieved through a displacement map and is highly customizable if you know what to do (eg. notice how the glass is imperfect)

The main idea for the gameplay is to guide an ant throughout various obstacles. In order to control it, you simply place crumbles at key locations and the ant will head for the closest one, in a straight line. I have plenty of ideas for obstacles and gameplay elements like water drops, spiderwebs, mushrooms, hornets, rolling acorns, etc.

The game needs a lot of work, but at least I'm sharing the little I have (I actually have more than what I published but it's boring as it is).
- Press space
- Click

« Last Edit: April 20, 2011, 10:00:27 am by Alexin »
"Find the fun"


  • Posts: 76
Duuuude. That magnifying glass, man. There's a ton of potential in this game. If you give it that small world made big vibe like Pikmin... duuuuude.


  • *
  • Posts: 4643
Pretty neat, but somehow I managed to separate the displacement from the magnifying glass itself when the camera auto-moved after I'd been playing I guess.

I like it though, nifty stuff.
Patience is a Virtue,
But Haste is my Life.
Proud member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.


  • *
  • Posts: 3132
It happens because the magnifying glass's body and the glass itself are separated and I'm not compensating for the camera's position.

For the curious, I attached the displacement map that controls the effect.
"Find the fun"


  • *
  • Posts: 1228
That effect is great!


  • Posts: 17
How. Do. You. Do. Displacement. MAPS!

EDIT: I mean make and use them in stencyl.(Not make them in stencyl :P )


  • *
  • Posts: 3132
The base for the code is from this article (there's a neat example at the end):
If you're asking how I create the map itself, then I don't recall all the details and I can't find the tutorial I used.

Code: [Select]
package scripts
import flash.filters.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.geom.Point;
import flash.geom.Rectangle;

import Box2DAS.Collision.*;
import Box2DAS.Collision.Shapes.*;
import Box2DAS.Common.*;
import Box2DAS.Dynamics.*;
import Box2DAS.Dynamics.Contacts.*;
import Box2DAS.Dynamics.Joints.*;

import stencyl.api.engine.*;
import stencyl.api.engine.behavior.*;
import stencyl.api.engine.font.*;
import stencyl.api.engine.scene.*;
import stencyl.api.engine.sound.*;
import stencyl.api.engine.tile.*;
import stencyl.api.engine.utils.*;
import org.flixel.*;

public dynamic class MagnifierController extends ActorScript
[Attribute(id="1", name="Glass Map", desc="The displacement map to use for the glass effect.")]
public var glassMapType:ActorType;

[Attribute(id="2", name="Glass Effect Strength", desc="The strength of the glass effect.")]
public var strength:Number;

private var glassMap:BitmapData;
private var glassBitmap:Bitmap = new Bitmap();
private var glassFilter:DisplacementMapFilter = new DisplacementMapFilter();

[Attribute(id="3", name="Hotspot X", desc="The horizontal coordinate of the hotspot.")]
public var hotspotX:Number;

[Attribute(id="4", name="Hotspot Y", desc="The vertical coordinate of the hotspot.")]
public var hotspotY:Number;

private var hotspot:Point = new Point();

//Do all actor initialization here
override public function init():void
var glassMapActor:Actor = createActor(glassMapType, 0.0, 0.0, Script.BACK);
var pixels:BitmapData = glassMapActor.currSprite._framePixels;

glassMap = new BitmapData(pixels.width, pixels.height, true, 0x808080);

glassFilter.scaleX      = strength;
glassFilter.scaleY      = strength;
glassFilter.componentX  = BitmapDataChannel.RED;
glassFilter.componentY  = BitmapDataChannel.GREEN;
glassFilter.mode        = DisplacementMapFilterMode.COLOR;
glassFilter.color       = 0x000000;
glassFilter.alpha       = 0.0;
glassFilter.mapPoint    = hotspot;
glassFilter.mapBitmap   = glassMap;

glassBitmap.bitmapData = FlxG.buffer;

//This is executed every frame of the game
override public function update():void
actor.setX((getMouseX() - hotspotX) + getScreenX());
actor.setY((getMouseY() - hotspotY) + getScreenY());
hotspot.x = getMouseX() - (glassMap.width >> 1);
hotspot.y = getMouseY() - (glassMap.height >> 1);

override public function draw(g:Graphics, x:Number, y:Number):void
glassFilter.mapPoint = hotspot;
glassBitmap.filters = [glassFilter];

override public function handleCollision(event:Collision):void

//Leave this alone. Do your initializing inside init()
public function MagnifierController(actor:Actor, scene:GameState)
super(actor, scene);

The behavior above is attached to the magnifier actor. Create another actor using the displacement map I posted and pass it as the attribute "Glass Map".

« Last Edit: May 01, 2011, 08:19:53 am by Alexin »
"Find the fun"


  • *
  • Posts: 3132
Topic split and moved to Working With StencylWorks.
"Find the fun"