Club Galactik is LIVE!!!

Posted on June 4, 2009
Filed Under Actionscript 3.0, General, Papervision | 3 Comments

I’m proud to tell everyone that the company where I work, VirtualFairground / BigwheelStudio, has released Club Galactik’s 3D Avatar Creator! Go check it and start creating your own Avatar! And do not forget to Keep checking the site cause there is a lot more to come!

clubgalactic_post_01 Hope you all like it!!

Press release:
Virtual Fairground previews next generation virtual world and MMOG

Amsterdam, the Netherlands – Club Galactik (www.clubgalactik.com), home of the upcoming MMO game and virtual world based on animation hit series Galactik Football (www.galactikfootball.com) went live today. With the site already fully localized for multiple territories, kids and tweens from all over the world can now start creating their own Club Galactik characters. They can currently choose from three of the seven Galactik Football teams: the superstar Snow Kids, the agile Wambas and the sinister Shadows. Users can also explore the lore of the Galactik Football universe and will soon be able to play a unique card game featuring their character. 3D Flash-based mini-games that you can play using your avatar will be added to the site in the coming weeks.

Club Galactik is completely developed and published in-house by Virtual Fairground (www.virtualfairground.com). The game is based on the Gaumont/Jetix co-produced animation series Galactik Football. The full MMO game experience is set to launch April 2010 in time for the start of the FIFA World Cup Soccer 2010 and the third season of the Galactik Football animation series.

“As soon as we announced that we were working on a Galactik Football MMO game there was a lot of interest from fans that wanted to see what we are working on”, says Maarten Brands of Virtual Fairground. “With a gradual roll-out of games and features we will have plenty going on to keep the fans happy while we work towards a full launch next year.”

“Launching the avatar creator and some of the mini-games is a great way for us to show what our team can do with Flash in a browser”, adds Ilja Goossens. “We feel that there a lot of misconceptions about what you can do with this technology in relation to games. The high penetration rate of Flash is a huge benefit and we want to show that our talented developers can create high-end entertainment experiences in a browser using this technology.”

Games games games

Posted on April 16, 2009
Filed Under General | 2 Comments

A quick question to you all out there, I am in search for great books on game development (isometrics, 3d etc) if you are aware of some great titles, be so kind and drop me a line. Thanx in advance.

FLARToolkit Single & MultipleMarker Detection

Posted on March 23, 2009
Filed Under Actionscript 3.0, Opensource, Papervision, experiments | 11 Comments

What you will need:
1. Photoshop (any will do)
2. Papervision3D rev. 817 or later
3. FlarToolkit
4. ArToolkit Marker Generator (flash player 10)
5. webcam
6. Fash CS3 or Higher

There are allready some great sites experimenting and writing tutorials about Augmented reality in flash. This is nothing new, just my experience in writing the code to create a simple version so I can learn from the others who started it. So before I start credits go out to squidder.com for some amazing tutorials and examples and saqoosha.net for starting the FlarToolkit.

For creating the best markers go and see the tutorial at squidder.com
For the starters kit you can get flartoolkit via libspark repository or download the starterskit at saqoosha.net.

Example of a Single Marker Detection:

Code Single Marker detection:

  1. package nl.wisman.codexperiments.augmented
  2. {
  3.  // papervision
  4.  import org.papervision3d.materials.utils.MaterialsList;
  5.  import org.papervision3d.objects.primitives.Cube;
  6.  import org.papervision3d.lights.PointLight3D;
  7.  import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  8.  import org.papervision3d.render.LazyRenderEngine;
  9.  import org.papervision3d.scenes.Scene3D;
  10.  import org.papervision3d.view.Viewport3D;
  11.  
  12.  // flash
  13.  import flash.display.PixelSnapping;
  14.  import flash.display.Bitmap;
  15.  import flash.net.URLRequest;
  16.  import flash.events.Event;
  17.  import flash.net.URLLoaderDataFormat;
  18.  import flash.net.URLLoader;
  19.  import flash.display.BitmapData;
  20.  import flash.media.Video;
  21.  import flash.media.Camera;
  22.  import flash.display.Sprite;
  23.  import org.papervision3d.objects.DisplayObject3D;
  24.  
  25.  // libspark
  26.  import org.libspark.flartoolkit.core.FLARCode;
  27.  import org.libspark.flartoolkit.core.param.FLARParam;
  28.  import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
  29.  import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
  30.  import org.libspark.flartoolkit.detector.FLARSingleMarkerDetector;
  31.  import org.libspark.flartoolkit.pv3d.FLARBaseNode;
  32.  import org.libspark.flartoolkit.pv3d.FLARCamera3D;
  33.  
  34.  public class FlarSingleMarkerDemo extends Sprite
  35.  {
  36.   // flar properties
  37.   private var _camParameters:FLARParam;
  38.   private var _marker4Pattern:FLARCode;
  39.   private var _raster:FLARRgbRaster_BitmapData;
  40.   private var _detector:FLARSingleMarkerDetector;
  41.   private var _flarCam3D:FLARCamera3D;
  42.   private var _resultMat:FLARTransMatResult;
  43.   private var _baseNode:FLARBaseNode;
  44.  
  45.   // flash properties
  46.   private var _cam:Camera;
  47.   private var _vid:Video;
  48.   private var _capture:Bitmap;
  49.   private var _loader:URLLoader;
  50.  
  51.   // papervision3d
  52.   private var _vp:Viewport3D;
  53.   private var _scene:Scene3D;
  54.   private var _renderer:LazyRenderEngine;
  55.   private var _light:PointLight3D;
  56.   private var _cube:Cube;
  57.  
  58.   public function FlarSingleMarkerDemo()
  59.   {
  60.    loadCamera();
  61.   }
  62.  
  63.   private function loadCamera():void
  64.   {
  65.    _loader = new URLLoader();
  66.    _loader.dataFormat = URLLoaderDataFormat.BINARY;
  67.    _loader.addEventListener(Event.COMPLETE, onLoadCamParam);
  68.    _loader.load(new URLRequest("camera_para.dat"));
  69.   }
  70.  
  71.   // camera parameters are loaded, load the marker you want to use
  72.   private function onLoadCamParam(event:Event):void
  73.   {
  74.    _loader.removeEventListener(Event.COMPLETE, onLoadCamParam);
  75.    _camParameters = new FLARParam();
  76.    _camParameters.loadARParam(_loader.data);
  77.    _camParameters.changeScreenSize(500, 500);
  78.  
  79.    _loader.dataFormat = URLLoaderDataFormat.TEXT;
  80.    _loader.addEventListener(Event.COMPLETE, onLoadCode);
  81.    _loader.load(new URLRequest("yourmarker.pat"));
  82.   }
  83.  
  84.   // marker now also loaded, so remove _loader and create a FlarCode
  85.   private function onLoadCode(event:Event):void
  86.   {
  87.    initWebcam();
  88.  
  89.    _marker4Pattern = new FLARCode(4, 4, 65, 65);
  90.    _marker4Pattern.loadARPatt(_loader.data);
  91.  
  92.    _loader.removeEventListener(Event.COMPLETE, onLoadCode);
  93.    _loader = null;
  94.  
  95.    // create bitmap and bitmapdata where we can draw the webcam into
  96.    var bmd:BitmapData = new BitmapData(500, 500, false, 0);
  97.    _capture = new Bitmap(bmd, PixelSnapping.AUTO,false);
  98.    _capture.width = 500;
  99.    _capture.height = 500;
  100.    addChild(_capture);
  101.  
  102.    _raster = new FLARRgbRaster_BitmapData(_capture.bitmapData);
  103.    _detector = new FLARSingleMarkerDetector(_camParameters, _marker4Pattern, 65);
  104.  
  105.    initFlar();
  106.    initPV3D();
  107.    initListeners();
  108.   }
  109.  
  110.   private function initWebcam():void
  111.   {
  112.    _cam = Camera.getCamera();
  113.    _cam.setMode(500, 500, 60);
  114.    _vid = new Video(500, 500);
  115.    _vid.attachCamera(_cam);
  116.   }
  117.  
  118.   private function initFlar():void
  119.   {
  120.    _flarCam3D = new FLARCamera3D(_camParameters);
  121.    _resultMat = new FLARTransMatResult();
  122.    _baseNode = new FLARBaseNode();
  123.   }
  124.  
  125.   private function initPV3D():void
  126.   {
  127.    _vp = new Viewport3D(500, 500);
  128.    addChild(_vp);
  129.  
  130.    _scene = new Scene3D();
  131.    _scene.addChild(_baseNode);
  132.  
  133.    _light = new PointLight3D();
  134.  
  135.    // add a cube or whatever we want to show when pattern is recognised
  136.    // in the basenode (FLARBaseNode, which extends from a DisplayObject3D)
  137.    var fmat:FlatShadeMaterial = new FlatShadeMaterial(_light, 0×7DC202, 0xCCCCCC);
  138.    _cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 80);
  139.    _cube.z = 20;
  140.    _cube.name = "cube";
  141.    _baseNode.addChild(_cube);
  142.  
  143.    _renderer = new LazyRenderEngine(_scene, _flarCam3D, _vp);
  144.   }
  145.  
  146.   private function initListeners():void
  147.   {
  148.    addEventListener(Event.ENTER_FRAME, render);
  149.   }
  150.  
  151.   private function render(event:Event):void
  152.   {
  153.    _capture.bitmapData.draw(_vid);
  154.  
  155.    if (_detector.detectMarkerLite(_raster, 65) && _detector.getConfidence() > 0.5)
  156.    {
  157.     // when deteactmarker finds the marker you created show the baseNode
  158.     _detector.getTransformMatrix(_resultMat);
  159.     _baseNode.setTransformMatrix(_resultMat);
  160.     _baseNode.visible = true;
  161.    }
  162.    else
  163.    {
  164.     _baseNode.visible = false;
  165.    }
  166.  
  167.    if(_baseNode.visible)
  168.    {
  169.     Cube(_baseNode.getChildByName("cube")).roll(1);
  170.    }
  171.  
  172.    _renderer.render();
  173.   }
  174.  }
  175. }

Example of a Multiple Marker Detection: (its still a work in progress, still shifts cube from one pattern to another but he…)

Code Multiple Marker detection:

  1. package
  2. {
  3.  // bulkloader
  4.  import br.com.stimuli.loading.BulkLoader;
  5.  
  6.  // papervision
  7.  import org.papervision3d.materials.utils.MaterialsList;
  8.  import org.papervision3d.objects.primitives.Cube;
  9.  import org.papervision3d.lights.PointLight3D;
  10.  import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  11.  import org.papervision3d.render.LazyRenderEngine;
  12.  import org.papervision3d.scenes.Scene3D;
  13.  import org.papervision3d.view.Viewport3D;
  14.  
  15.  // flash
  16.  import flash.display.PixelSnapping;
  17.  import flash.display.Bitmap;
  18.  import flash.net.URLRequest;
  19.  import flash.events.Event;
  20.  import flash.net.URLLoaderDataFormat;
  21.  import flash.net.URLLoader;
  22.  import flash.display.BitmapData;
  23.  import flash.media.Video;
  24.  import flash.media.Camera;
  25.  import flash.display.Sprite;
  26.  import org.papervision3d.objects.DisplayObject3D;
  27.  
  28.  // libspark
  29.  import org.libspark.flartoolkit.core.FLARCode;
  30.  import org.libspark.flartoolkit.core.param.FLARParam;
  31.  import org.libspark.flartoolkit.core.raster.rgb.FLARRgbRaster_BitmapData;
  32.  import org.libspark.flartoolkit.core.transmat.FLARTransMatResult;
  33.  import org.libspark.flartoolkit.detector.FLARMultiMarkerDetector;
  34.  import org.libspark.flartoolkit.pv3d.FLARBaseNode;
  35.  import org.libspark.flartoolkit.pv3d.FLARCamera3D;
  36.  
  37.  public class FlarMultiMarkerDemo extends Sprite
  38.  {
  39.   // flar properties
  40.   private var _camParameters:FLARParam;
  41.   private var _raster:FLARRgbRaster_BitmapData;
  42.   private var _detector:FLARMultiMarkerDetector;
  43.   private var _flarCam3D:FLARCamera3D;
  44.   private var _resultMat:FLARTransMatResult;
  45.  
  46.   // flash properties
  47.   private var _cam:Camera;
  48.   private var _vid:Video;
  49.   private var _capture:Bitmap;
  50.   private var _loader:URLLoader;
  51.   private var _allMarkers:Array;
  52.  
  53.   // papervision3d
  54.   private var _vp:Viewport3D;
  55.   private var _scene:Scene3D;
  56.   private var _renderer:LazyRenderEngine;
  57.   private var _light:PointLight3D;
  58.   private var _bLoader:BulkLoader;
  59.  
  60.   public function FlarMultiMarkerDemo()
  61.   {
  62.    _allMarkers = [
  63.          {markerSource: "path/your_first_marker.pat", segments: 4, size: 65},
  64.          {markerSource: "path/your_second_marker.pat", segments: 4, size: 65},
  65.          {markerSource: "path/your_third_marker.pat", segments: 4, size: 65},
  66.         ];
  67.  
  68.    loadCamera();
  69.   }
  70.  
  71.   private function loadCamera():void
  72.   {
  73.    _loader = new URLLoader();
  74.    _loader.dataFormat = URLLoaderDataFormat.BINARY;
  75.    _loader.addEventListener(Event.COMPLETE, onLoadCamParam);
  76.    _loader.load(new URLRequest("camera_para.dat"));
  77.   }
  78.  
  79.   // camera parameters are loaded, load the marker you want to use
  80.   // camera parameters are loaded, load the marker you want to use
  81.   private function onLoadCamParam(event:Event):void
  82.   {
  83.    _loader.removeEventListener(Event.COMPLETE, onLoadCamParam);
  84.  
  85.    // setup camera parameters
  86.    _camParameters = new FLARParam();
  87.    _camParameters.loadARParam(_loader.data);
  88.    _camParameters.changeScreenSize(500, 500);
  89.  
  90.    // reset loader
  91.    _loader = null;
  92.  
  93.    _bLoader = new BulkLoader("markerLoader");
  94.    _bLoader.addEventListener(Event.COMPLETE, markersLoadedHandler);
  95.    // now load multiple markers (for now its 3)
  96.    for (var i:int = 0; i < _allMarkers.length; i++)
  97.    {
  98.     _bLoader.add(_allMarkers[i].markerSource, {id: "marker_" + i.toString() });
  99.    }
  100.    _bLoader.start();
  101.   }
  102.  
  103.   private function markersLoadedHandler(event:Event):void
  104.   {
  105.    var codes:Array = new Array();
  106.    var sizes:Array = new Array();
  107.    for (var i:int = 0; i < _allMarkers.length; i++)
  108.    {
  109.     var code:FLARCode = new FLARCode(_allMarkers[i].segments, _allMarkers[i].segments, _allMarkers[i].size, _allMarkers[i].size);
  110.     code.loadARPatt(_bLoader.getContent( "marker_" + i.toString()));
  111.     codes.push(code);
  112.     sizes.push(_allMarkers[i].size);
  113.    }
  114.  
  115.    initWebcam();
  116.  
  117.    // create bitmap and bitmapdata where we can draw the webcam into
  118.    var bmd:BitmapData = new BitmapData(500, 500, false, 0);
  119.    _capture = new Bitmap(bmd, PixelSnapping.AUTO,false);
  120.    _capture.width = 500;
  121.    _capture.height = 500;
  122.    addChild(_capture);
  123.  
  124.    _raster = new FLARRgbRaster_BitmapData(_capture.bitmapData);
  125.    _detector = new FLARMultiMarkerDetector(_camParameters, codes, sizes, codes.length);
  126.  
  127.    initFlar();
  128.    initPV3D();
  129.    initListeners();
  130.   }
  131.  
  132.   private function initWebcam():void
  133.   {
  134.    _cam = Camera.getCamera();
  135.    _cam.setMode(500, 500, 60);
  136.    _vid = new Video(500, 500);
  137.    _vid.attachCamera(_cam);
  138.   }
  139.  
  140.   private function initFlar():void
  141.   {
  142.    _flarCam3D = new FLARCamera3D(_camParameters);
  143.    _resultMat = new FLARTransMatResult();
  144.   }
  145.  
  146.   private function initPV3D():void
  147.   {
  148.    _vp = new Viewport3D(500, 500);
  149.    addChild(_vp);
  150.  
  151.    _scene = new Scene3D();
  152.  
  153.    _light = new PointLight3D();
  154.  
  155.    // add a cube or whatever we want to show when pattern is recognised
  156.    // in the basenode (FLARBaseNode, which extends from a DisplayObject3D)
  157.    for (var i:int = 0; i < _allMarkers.length; i++)
  158.    {
  159.     var fmat:FlatShadeMaterial = new FlatShadeMaterial(_light, 0×7DC202 * Math.random(), 0xCCCCCC);
  160.     var cube:Cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 80);
  161.     cube.z = 20;
  162.     cube.name = "cube_" + i.toString();
  163.     var baseNode:FLARBaseNode = new FLARBaseNode();
  164.     baseNode.name = "baseNode_" + i;
  165.     baseNode.addChild(cube);
  166.     _scene.addChild(baseNode);
  167.    }
  168.  
  169.    _renderer = new LazyRenderEngine(_scene, _flarCam3D, _vp);
  170.   }
  171.  
  172.   private function initListeners():void
  173.   {
  174.    addEventListener(Event.ENTER_FRAME, render);
  175.   }
  176.  
  177.   private function render(event:Event):void
  178.   {
  179.    _capture.bitmapData.draw(_vid);
  180.  
  181.    for (var i:int = 0; i< _allMarkers.length; i++)
  182.    {
  183.     if(_detector.detectMarkerLite(_raster, 65) &#038;&#038; _detector.getConfidence(i) > .5)
  184.     {
  185.      _detector.getTransmationMatrix(i, _resultMat);
  186.      FLARBaseNode(_scene.getChildByName("baseNode_" + i)).setTransformMatrix(_resultMat);
  187.      _scene.getChildByName("baseNode_" + i).visible = true;
  188.     }
  189.     else
  190.     {
  191.      _scene.getChildByName("baseNode_" + i).visible = false;
  192.     }
  193.    }
  194.  
  195.    _renderer.render();
  196.   }
  197.  }
  198. }

And last but not least a flash version to play with:

Try it yourself, but don’t forget to download the patterns first.

Augmented Reality Drumkit by Squidder

Posted on March 20, 2009
Filed Under Actionscript 3.0, Interaction, Opensource, experiments | 1 Comment


Augmented Reality Drum Kit (demo #1) from squidder on Vimeo. source: squidder

Pearl Jam The Game

Posted on March 18, 2009
Filed Under General, Interaction, Papervision | Leave a Comment

pearljamsiteGreat 3D puzzle game!! Definately check it out! (source: thefwa)

Nice truck game

Posted on March 15, 2009
Filed Under Papervision | Leave a Comment

source - strongesttruck

Flash Press by NoPonies

Posted on March 15, 2009
Filed Under Actionscript 3.0, Opensource | Leave a Comment

Flash Press is simply an AMFPHP and Zend_AMF service for connecting to Wordpress. The purpose of the project is to allow for using Wordpress as a CMS for Flash websites etc. Currently it only supports read operations from the Wordpress database. However, they are looking at adding write support.

It’s still in development but a nice project they are working on, so have a look.

PV3D - Interactive Shaded Cube

Posted on March 8, 2009
Filed Under Actionscript 3.0, Papervision, experiments | 7 Comments

protoshader

Ryan and myself wanted to figure out how to create have an interactive cube which uses a ShadedMaterial (MovieMaterial + Shader). Problem was that when you had a shadedmaterial you didn’t get any interactiveScene3DEvent’s back, when you used only the MovieMaterial and set it to interactive=true everything worked fine, but in combination with a shader it created a problem. So I had a look at it today and came up with the following solution.

  1. package
  2. {
  3.  import flash.events.Event;
  4.  
  5.  import org.papervision3d.materials.shaders.PhongShader;
  6.  import org.papervision3d.materials.shaders.ShadedMaterial;
  7.  import org.papervision3d.events.InteractiveScene3DEvent;
  8.  import org.papervision3d.materials.MovieAssetMaterial;
  9.  import org.papervision3d.materials.utils.MaterialsList;
  10.  import org.papervision3d.objects.primitives.Cube;
  11.  import org.papervision3d.lights.PointLight3D;
  12.  import org.papervision3d.view.BasicView;
  13.  import org.papervision3d.core.proto.CameraObject3D;
  14.  import org.papervision3d.core.proto.MaterialObject3D;
  15.  import org.papervision3d.objects.DisplayObject3D;
  16.  import org.papervision3d.core.geom.renderables.Triangle3D;
  17.  
  18.  public class DemoShader extends BasicView
  19.  {
  20.   private var _clipsAndSides:Array;
  21.   private var _light:PointLight3D;
  22.   private var _cube:Cube;
  23.  
  24.   public function DemoShader()
  25.   {
  26.    // linked library assets and the cubeSides we want it to belong to
  27.    _clipsAndSides = [  {linkageId: "clip_1", cubeSide:"front" },
  28.         {linkageId: "clip_2", cubeSide:"back" },
  29.         {linkageId: "clip_3", cubeSide:"top" },
  30.         {linkageId: "clip_4", cubeSide:"bottom"},
  31.         {linkageId: "clip_5", cubeSide:"left"},
  32.         {linkageId: "clip_6", cubeSide:"right"}
  33.        ];
  34.  
  35.    // light
  36.    _light = new PointLight3D();
  37.    _light.z = camera.z;
  38.    _light.x = camera.x;
  39.    _light.y = 250;
  40.  
  41.    // place camera a bit higher up
  42.    camera.y = 500;
  43.  
  44.    viewport.buttonMode = true;
  45.    viewport.interactive = true;
  46.  
  47.    var mList:MaterialsList = new MaterialsList();
  48.    for (var i:int = 0; i < _clipsAndSides.length; i++)
  49.    {
  50.     var ma:MovieAssetMaterial = new MovieAssetMaterial(_clipsAndSides[i].linkageId);
  51.     var phongShader:PhongShader = new PhongShader(_light, 0xFFFFFF, 0×333333);
  52.     var shadedMaterial:ShadedMaterial = new ShadedMaterial(ma, phongShader);
  53.     shadedMaterial.interactive = true;
  54.     shadedMaterial.name = _clipsAndSides[i].linkageId;
  55.     mList.addMaterial(shadedMaterial, _clipsAndSides[i].cubeSide);
  56.    }
  57.  
  58.    _cube = new Cube(mList, 500, 500, 500, 2, 2, 2);
  59.    _cube.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, objectClicked);
  60.    scene.addChild(_cube);
  61.  
  62.    // render
  63.    addEventListener(Event.ENTER_FRAME, update);
  64.   }
  65.  
  66.   private function objectClicked(event:InteractiveScene3DEvent):void
  67.   {
  68.    switch(event.face3d.material.name)
  69.    {
  70.     case "clip_1":
  71.      trace("clip 1 clicked");
  72.      break;
  73.  
  74.     case "clip_2":
  75.      trace("clip 2 clicked");
  76.      break;
  77.  
  78.     case "clip_3":
  79.      trace("clip 3 clicked");
  80.      break;
  81.  
  82.     case "clip_4":
  83.      trace("clip 4 clicked");
  84.      break;
  85.  
  86.     case "clip_5":
  87.      trace("clip 5 clicked");
  88.      break;
  89.  
  90.     case "clip_6":
  91.      trace("clip 6 clicked");
  92.      break;
  93.    }
  94.   }
  95.  
  96.   private function update(event:Event):void
  97.   {
  98.    camera.lookAt(_cube);
  99.  
  100.    _cube.yaw(1.5); // y-axis
  101.    _cube.pitch(1.5); // x-axis
  102.  
  103.    singleRender();
  104.   }
  105.  }
  106. }

Hope everything is clear and if you have a better solution please comment a post!

Brownian Motion + CollisionGrid

Posted on March 1, 2009
Filed Under Actionscript 3.0, experiments | 3 Comments

brownianmotionwithgridcollisionView experiment.

Started reading Advanced Actionscript 3 Animation written by Keith Peters & Seb Lee-DeLisle (technical reviewer) so here’s a little experiment with grid collision using the FP10 Vector class. Let it run for a while and it creates a nice weird image.

Brownian CollisionDemo:

  1. package
  2. {
  3.  import flash.display.BlendMode;
  4.  import flash.filters.BlurFilter;
  5.  import flash.display.Bitmap;
  6.  import flash.display.BitmapData;
  7.  import flash.events.Event;
  8.  import flash.display.StageScaleMode;
  9.  import flash.display.StageAlign;
  10.  import flash.display.DisplayObject;
  11.  import flash.display.Sprite;
  12.  
  13.  public class CollisionDemo extends Sprite
  14.  {
  15.   private const GRID_SIZE:Number = 30;
  16.   private const RADIUS:Number = 15;
  17.  
  18.   private var _screen:BitmapData = new BitmapData(800, 600, false, 0);
  19.   private var _balls:Vector.<DisplayObject>;
  20.   private var _grid:CollisionGrid;
  21.   private var _numBalls:int = 100;
  22.   private var _ballContainer:Sprite = new Sprite();
  23.  
  24.   public function CollisionDemo()
  25.   {
  26.    stage.align = StageAlign.TOP_LEFT;
  27.    stage.scaleMode = StageScaleMode.NO_SCALE;
  28.  
  29.    addChild(new Bitmap(_screen));
  30.    addChild(_ballContainer);
  31.  
  32.    _grid = new CollisionGrid(stage.stageWidth, stage.stageHeight, GRID_SIZE);
  33.    _grid.drawGrid(graphics, 0, .1);
  34.  
  35.    makeBalls();
  36.  
  37.    addEventListener(Event.ENTER_FRAME, onEnterFrame);
  38.   }
  39.  
  40.   function onEnterFrame(event:Event):void
  41.   {
  42.    updateBalls();
  43.    _grid.check(_balls);
  44.  
  45.    var numChecks:int = _grid.checks.length;
  46.    for(var j:int = 0; j < numChecks; j += 2)
  47.    {
  48.     checkCollision(_grid.checks[j] as Circle, _grid.checks[j + 1] as Circle);
  49.    }
  50.  
  51.    _screen.draw(_ballContainer);
  52.   }
  53.  
  54.   private function makeBalls():void
  55.   {
  56.    _balls = new Vector.<DisplayObject>(_numBalls);
  57.    for(var i:int = 0; i < _numBalls; i++)
  58.    {
  59.     var circle:Circle = new Circle(RADIUS);
  60.     circle.x = Math.random() * stage.stageWidth;
  61.     circle.y = Math.random() * stage.stageHeight;
  62.     circle.vx = Math.random() * 10 - 5;
  63.     circle.vy = Math.random() * 10 - 5;
  64.     _ballContainer.addChild(circle);
  65.     _balls[i] = circle;
  66.    }
  67.  
  68.    _ballContainer.visible = false;
  69.   }
  70.  
  71.   private function updateBalls():void
  72.   {
  73.    for(var i:int = 0; i < _numBalls; i++)
  74.    {
  75.     var circle:Circle = _balls[i] as Circle;
  76.     circle.update();
  77.  
  78.     circle.vx = Math.random() * 10 - 5;
  79.     circle.vy = Math.random() * 10 - 5;
  80.  
  81.     if(circle.x < RADIUS)
  82.     {
  83.      circle.x = RADIUS;
  84.      circle.vx *= -1;
  85.     }
  86.     else if(circle.x > stage.stageWidth - RADIUS)
  87.     {
  88.      circle.x = stage.stageWidth - RADIUS;
  89.      circle.vx *= -1;
  90.     }
  91.     if(circle.y < RADIUS)
  92.     {
  93.      circle.y = RADIUS;
  94.      circle.vy *= -1;
  95.     }
  96.     else if(circle.y > stage.stageHeight - RADIUS)
  97.     {
  98.      circle.y = stage.stageHeight - RADIUS;
  99.      circle.vy *= -1;
  100.     }
  101.     circle.color = 0xffffff;
  102.    }
  103.   }
  104.  
  105.   private function checkCollision(circleA:Circle, circleB:Circle):void
  106.   {
  107.    var dx:Number = circleB.x - circleA.x;
  108.    var dy:Number = circleB.y - circleA.y;
  109.    var dist:Number = Math.sqrt(dx * dx + dy * dy);
  110.    if(dist < circleA.radius + circleB.radius)
  111.    {
  112.     circleA.color = 0×7DC202;
  113.     circleB.color = 0×7DC202;
  114.    }
  115.   }
  116.  }
  117. }

CollisionGrid Class:

  1. package
  2. {
  3.  import flash.display.DisplayObject;
  4.  import flash.display.Graphics;
  5.  import flash.events.EventDispatcher;
  6.  
  7.  public class CollisionGrid extends EventDispatcher
  8.  {
  9.   private var _checks:Vector.<DisplayObject>;
  10.   private var _grid:Vector.<Vector.<DisplayObject>>;
  11.   private var _gridSize:Number;
  12.   private var _height:Number;
  13.   private var _width:Number;
  14.   private var _numCells:int;
  15.   private var _numCols:int;
  16.   private var _numRows:int;
  17.  
  18.   public function CollisionGrid(width:Number, height:Number, gridSize:Number)
  19.   {
  20.    _width = width;
  21.    _height = height;
  22.    _gridSize = gridSize;
  23.    _numCols = Math.ceil(_width / _gridSize);
  24.    _numRows = Math.ceil(_height / _gridSize);
  25.    _numCells = _numCols * _numRows;
  26.   }
  27.  
  28.   public function drawGrid(graphics:Graphics, color:int = 0×333333, alpha:Number = 1):void
  29.   {
  30.    graphics.lineStyle(0, color, alpha);
  31.    for (var i:int = 0; i < _width; i += _gridSize)
  32.    {
  33.     graphics.moveTo(i, 0);
  34.     graphics.lineTo(i, _height);
  35.    }
  36.  
  37.    for (var j:int = 0; j < _height; j += _gridSize)
  38.    {
  39.     graphics.moveTo(0, j);
  40.     graphics.lineTo(_width, j);
  41.    }
  42.   }
  43.  
  44.   public function check(objects:Vector.<DisplayObject>):void
  45.   {
  46.    var numObjects:int = objects.length;
  47.    _grid = new Vector.<Vector.<DisplayObject>>(_numCells);
  48.    _checks = new Vector.<DisplayObject>();
  49.    for(var i:int = 0; i < numObjects; i++)
  50.    {
  51.     var obj:DisplayObject = objects[i];
  52.     var index:int = Math.floor(obj.y / _gridSize) * _numCols + Math.floor(obj.x / _gridSize);
  53.     if(_grid[index] == null) _grid[index] = new Vector.<DisplayObject>;
  54.     _grid[index].push(obj);
  55.    }
  56.  
  57.    checkGrid();
  58.   }
  59.  
  60.   private function checkGrid():void
  61.   {
  62.    for (var i:int = 0; i <_numCols; i++)
  63.    {
  64.     for (var j:int = 0; j < _numRows; j++)
  65.     {
  66.      checkOneCell(i,j);
  67.      checkTwoCells(i, j, i + 1, j);  // right
  68.      checkTwoCells(i, j, i - 1, j + 1); // lower left
  69.      checkTwoCells(i, j, i    , j + 1); // lower
  70.      checkTwoCells(i, j, i + 1, j + 1);  // lower right
  71.     }
  72.    }
  73.   }
  74.  
  75.   private function checkOneCell(x:int, y:int):void
  76.   {
  77.    var cell:Vector.<DisplayObject> = _grid[y * _numCols + x];
  78.    if (cell == null) return;
  79.  
  80.    var cellLength:int = cell.length;
  81.    for (var i:int = 0; i < cellLength - 1; i++)
  82.    {
  83.     var objA:DisplayObject = cell[i];
  84.  
  85.     for (var j:int = i + 1; j < cellLength; j++)
  86.     {
  87.      var objB:DisplayObject = cell[j];
  88.      _checks.push(objA, objB);
  89.     }
  90.    }
  91.   }
  92.  
  93.   private function checkTwoCells(x1:int, y1:int, x2:int, y2:int):void
  94.   {
  95.    // make sure cell exists
  96.    if (x2 >= _numCols || x2 < 0 || y2 >= _numRows) return;
  97.  
  98.    var cellA:Vector.<DisplayObject> = _grid[y1 * _numCols + x1];
  99.    var cellB:Vector.<DisplayObject> = _grid[y2 * _numCols + x2];
  100.    if (cellA == null || cellB == null) return;
  101.  
  102.    var cellALength:int = cellA.length;
  103.    var cellBLength:int = cellB.length;
  104.  
  105.    for (var i:int = 0; i < cellALength; i++)
  106.    {
  107.     var objA:DisplayObject = cellA[i];
  108.  
  109.     for(var j:int = 0; j < cellBLength; j++)
  110.     {
  111.      var objB:DisplayObject = cellB[j];
  112.      _checks.push(objA, objB);
  113.     }
  114.    }
  115.   }
  116.  
  117.   public function get checks():Vector.<DisplayObject>
  118.   {
  119.    return _checks;
  120.   }
  121.  }
  122. }

Cartelle, a new interactive studio

Posted on February 27, 2009
Filed Under companies | 1 Comment

cartelle

We have a new Interactive studio amongst us! Stevijn van Olst & Johnny Slack have joined forces and have called their baby Cartelle. Go check it out, have some fun with all the toys they have put up and don’t forget to check out their work aswell!

keep looking »
-->