Raspberry Pi Setup – Quick and Simple

Interfacing with the Mindwave Mobile

Connecting and Communicating – Raspberry Pi and Arduino

We are going to be demoing the game at the Handlebar in Kensington Market on Pi Day, and all are welcome.  For some more information about what we are building, check out our page @ http://cttoronto.com/piday/

Come and check it out, support our group and have a couple drinks. https://www.facebook.com/events/448058041931538/

More news, now that we are back in Toronto. We have joined forces with a bunch of different people in town and formed a group of creative technology enthusiasts called the Creative Technologists of Toronto. You can check out our blog at http://cttoronto.com, we have also began updating our Facebook page @ http://www.facebook.com/CreativeTechTO and on twitter @ https://twitter.com/CreativeTechTO.

We meet weekly on Wednesday nights where we learn, work, and drink. It has been quite fun for the past month and we are very excited to start building a couple of projects. If you are interested, feel free to post on our Facebook page or shoot us a message at contact@cultcreative.com asking for more details.

We were making a page that had a requirement for a ton of like buttons on it. We tried to use the Graph API, but the process was rejected because the functionality already exists in the plug-in. The issue with the plugin is that you don’t get any visual control over the buttons and you end up with dozens of iframes within your page.

We were forced to use the standard Like buttons and just wrap them in div’s to hide the overflow. This is something that we have done before, but find it to be more of a hack than being able to actually control the look / feel.

What happened to us was that all of a sudden, we could only see half the like buttons. For hours we tried to figure out what the issue was. There was nothing online that we could find that would justify this. We tried numerous browsers, a ton of different things, but had very little luck.

In the end, we discovered what the issue was, it feels like such a stupid thing BUT could have saved a ton of time with testing; so we figured we would share our findings.

It appears that when an item is liked (possibly just with Graph API), it becomes part of the app’s property. If the app just happens to be in sandbox mode and the tester is logged out, they will not see any of the Like buttons for those previously liked objects… but they will see the Like buttons for other objects on the same domain that weren’t previously liked.

Hopefully, this helps someone save the time that we spent searching for a possible solution.

Working with the amazing folks over at Evolution Bureau, we were tasked with building a game for Facebook where the character is running through pipes, destroying clogs with her Liquid Plumr products.

This was one of the more fun projects of the year for us. Websites and apps are fun, but games require that extra bit of creativity and problem solving that we enjoy so much.

After going through a couple of different technology options, we ended up using the Citrus Engine (http://citrusengine.com). For more on the Citrus Engine and its capabilities, check out our blog post about our experiences with the system.

The engine came with a level builder that compiles a lot of the XML for you and ties into the API for rapid development and editing. We then built out the character animations and built out the weapons in the game, which proved to be quite a challenge since it was a little difficult finding much documenation on the weapon systems.

In the end, the game turned out quite well, it was tied in with a contest which ran smoothly. You can still play the game over at the Liquid Plumbr Facebook page (https://www.facebook.com/LiquidPlumr)

Client: Liquid Plumr
Agency: Evolution Bureau
Technologies Implemented: PHP, Flash, ActionScript, Citrus Engine
Our Role: Develop the Facebook game in Citrus Engine, build Flash/ActionScript application, setup high score board.

The reason that we need to take the snapshot of objects is primarily to be able to replace complex objects with bitmaps, for saving state in the apps that we have built.

It isn’t the most straight forward function, if you aren’t familiar with how the framework works, so we thought that we would show how to do it.

public static function copyAsBitmapData(ARG_sprite:DisplayObject):BitmapData {

			if ( ARG_sprite == null) {
				return null;
			}

			var resultRect:Rectangle = new Rectangle();
			sprite.getBounds(sprite, resultRect);

			var context:Context3D = Starling.context;
			var scale:Number = Starling.contentScaleFactor;

			var nativeWidth:Number = Starling.current.stage.stageWidth;
			var nativeHeight:Number = Starling.current.stage.stageHeight;

			var support:RenderSupport = new RenderSupport();
			RenderSupport.clear();
			support.setOrthographicProjection(0,0,nativeWidth, nativeHeight);
			support.applyBlendMode(true);

			if (sprite.parent){
				support.transformMatrix(sprite.parent);
			}

			support.translateMatrix( -sprite.x + sprite.width / 2, -sprite.y + sprite.height / 2 );

			var result:BitmapData = new BitmapData(nativeWidth, nativeHeight, true, 0x00000000);

			support.pushMatrix();

			support.blendMode = sprite.blendMode;
			support.transformMatrix(sprite);
			sprite.render(support, 1.0);
			support.popMatrix();

			support.finishQuadBatch();

			context.drawToBitmapData(result);	

			var w:Number = sprite.width;
			var h:Number = sprite.height;

			if (w == 0 || h == 0) {
				return null;
			}

			var returnBMPD:BitmapData = new BitmapData(w, h, true, 0);
			var cropArea:Rectangle = new Rectangle(0, 0, sprite.width, sprite.height);

			returnBMPD.draw( result, null, null, null, cropArea, true );
			return returnBMPD;
		}

What is it?

Citrus engine is a Flash game engine. It incorporates physics and level editing for building side-scrolling 2D games in Flash. The latest version of Citrus Engine is built to work on top of the Starling Framework (gamua.com/starling) allowing the engine to publish itself as 2D to Stage3D, thus enabling hardware acceleration.

Why Citrus?

Citrus Engine is now a free framework that has a decent support community that is very helpful for starting up. They also provide a same game and there are tons of tutorials. We have tried several different game engines for things like isometrics, side-scrolling, etc and found Citrus to have one of the shortest learning curves.

Our Experiences

In the past, we have toyed with the idea of using Citrus Engine but have never seen a true need for a full game engine in most of the projects that we work on. Recently we needed to build something out relatively quickly, and that meant finding a solid engine to take care of things like side-scrolling and physics.

We found it very easy to get going in the engine, but quickly hit a brick wall. We were trying to build character animations, weapons, fairly complex levels with coins, and a bunch more. There wasn’t much time to go through the entire code library, so we were hoping that there would be a lot of documentation in the forums. The unfortunate thing is that there wasn’t much help. We were forced to dig through the engine from the ground up and learn how all the pieces tied together and what the engine was looking for in terms of frame labels for animation sequences.

In the end, that was still MUCH faster than building our own game engine from scratch and we are very thankful to the folks that built the engine. Apart from the advanced documentation not being there when we needed it, we got things going and it all worked out.

What we quickly learned was that when you create a texture, Starling doesn’t automagically look to see if there is a texture that already exists that is identical. It also doesn’t destroy the Bitmap reference when the Texture is destroyed.

Our solution was to make a simple texture / asset manager.

The approach is quite basic, but it drastically improved performance in the app. We made a singleton class so that we could ensure it was accessible from the entire app and that there would only ever be one instance of it (http://blog.pixelbreaker.com/actionscript-3-0/as30-better-singletons).

From there, all that needed to be done was to create a Dictionary object to house all references to the Textures / Bitmap Objects. We called that “textures”. To simplify calls from the rest of the app, we created a quick get function and a delete function. It looks like the this:

package {
	import flash.utils.Dictionary;
	import flash.display.BitmapData;
	import starling.textures.Texture;

	public class TextureLoader {

		private static var instance:TextureLoader;
		private var _textureDictionary:Dictionary;

		public function get textureDictionary():Dictionary
		{
			return _textureDictionary;
		}

		public function set textureDictionary(value:Dictionary):void
		{
			_textureDictionary = value;
		}

		public static function getInstance():TextureLoader {
			if (instance == null) {
				instance = new TextureLoader(new SingletonBlocker());
			}
			return instance;
		}

		public function TextureLoader(p_key:SingletonBlocker):void {
			// this shouldn't be necessary unless they fake out the compiler:
			if (p_key == null) {
				throw new Error("Error: Instantiation failed: Use TextureLoader.getInstance() instead of new.");
			}
		}

		public function getBitmapTexture(ARG_name:String, ARG_bmp:Class):Texture {

			if (textureDictionary == null) textureDictionary = new Dictionary();

			if (textureDictionary[ARG_name] != null) {
				return textureDictionary[ARG_name];
			} else {
				var bmp:BitmapData = new ARG_bmp();
				var texture:Texture = Texture.fromBitmapData(new ARG_bmp());
				// dispose the bitmap data after it has been applied to a texture
				bmp.dispose();
				bmp = null;
				// assign the texture to the dictionary
				textureDictionary[ARG_name] = texture;
				return texture;
			}

			return null;
		}

		public function clearTexture(ARG_name:String):void {
			if (textureDictionary[ARG_name] != null) {
				textureDictionary[ARG_name].dispose();
				delete textureDictionary[ARG_name];
			}
		}
	}
}
// the following code is also in the SingletonDemo.as file
// this class is only available to SingletonDemo
// (despite the internal access designation)
internal class SingletonBlocker {}

Something that you might notice in there is that we are disposing the BitmapData object and setting it to null. What happens in Starling / Stage 3D is that the BitmapData gets duplicated into a Texture, leaving the BitmapData to float around in memory.

We dispose of the BitmapData and then set it to null to allow it to be collected by the Garbage Collector.

The way this class works, is that you request a texture, passing in the BitmapData class reference and a name. It then checks to see if that has already been created. If it has been created, it returns that texture. If not, it will create it and add it to the dictionary for later use.

// create an image from the background image class, name it “backgroundImage
var img:Image = new Image (TextureLoader.getInstance().getBitmapTexture (“backgroundImage”, assets.backgroundImage));

We were asked by our friends at Split Element to assist in the creation of a little racing game for NOS Energy Drink that would live inside a banner and on their Facebook page. Using Flash, we built a fun little game where you can rip around the track in either a sports car or on a long board (skateboard).

Client: NO Energy Drink
Agency: Split Element Inc
Technologies Implemented: Flash, ActionScript
Our Role: All scripting related to the game.

When we came across Starling and ran a couple tests as to the capabilities, we decided that it was a definitely option. Plus, building the iPad app in Flash meant that we would have a code-base that was already very compatible with the web and would require substantially less re-coding in order to get it active.

Once we started in Starling, it was amazing how much things have changed in the world of Flash for mobile. Animations were running smoothly, interaction responses were actually happening when you expected them to, and things looked very promising.

One thing to know about the way frameworks like Starling work is that they write to Air’s Stage3D. This means a LOT of bitmaps and bitmap data floating around that you need to make sure you clean up. Memory usage was the hardest hurdle to jump when it came to build a very graphics-heavy app for the iPad with Flash.

Overall, we had a great first experience with Starling. Shortly we will be publishing a tutorial or two with some tips and tricks that we learned along the way. Stay tuned.