Our flash game designer tools let you create your own online game in a flash!    TEST IT…

Create a Mouse Spatial Component

The goal of this Tutorial is to show how a MouseSpatialComponent is created to move a custom sprite mouse cursor.

See example of this tutorial in action

A spatial component class is used to keep/set information about the position, rotation and scale of an IEntity. If you examine http://pushbuttonengine.com/docs/Lesson-02.html you will see a sprite is added to a scene by creating an IEntity with a SimpleSpatialComponent and a SpriteRenderComponent where the SpriteRenderComponent references to the position of the SpatialComponent.

If we would derrive a new MouseSpatialComponent class from SimpleSpatialComponent that will update its position to the mouse cursor position the circle in the http://pushbuttonengine.com/docs/Lesson-02.html could simply we turned into a mouse cursor just by adding the MouseSpatialComponent instead of the SimpleSpatialComponent.

Here is how we code the component:

We first derrive the MouseSpatialComponent class from the SimpleSpatialComponent

public class MouseSpatialComponent extends SimpleSpatialComponent
{
     ...
}

We use a private var _scene:BaseSceneComponent to store the active scene so we can use that for Screen to World Point transformation using _scene.transformScreenToWorld .
This _scene var will be set in the overridden onTick function.

      private var _scene:BaseSceneComponent = null;

In the onTick handler of our MouseSpatialComponent we will:

Do a lookup of the active scene and store it in our _scene variable. The active scene will be retreived as the first BaseSceneComponent we can find in the IEntity of our MouseSpatialComponent.spatialManager.

   var sceneEntity:IEntity = BasicSpatialManager2D(this.spatialManager).owner;
   _scene = BaseSceneComponent(sceneEntity.lookupComponentByType(BaseSceneComponent));      	   

When we have our _scene, we can transform the current mouse coordinates to World space and set our position

   var worldPoint:Point = _scene.transformScreenToWorld(
   new Point(Global.mainStage.mouseX,Global.mainStage.mouseY));

   position.x = worldPoint.x;
   position.y = worldPoint.y;

All the code:

package
{
	import com.pblabs.engine.core.Global;
	import com.pblabs.engine.entity.IEntity;
	import com.pblabs.rendering2D.BaseSceneComponent;
	import com.pblabs.rendering2D.BasicSpatialManager2D;
	import com.pblabs.rendering2D.SimpleSpatialComponent;

	import flash.geom.Point;

    public class MouseSpatialComponent extends SimpleSpatialComponent
    { 

      override public function onTick(tickRate:Number):void
      {

      	  if (_scene==null && this.spatialManager!=null)
      	  {
      	  	 if (this.spatialManager is BasicSpatialManager2D)
      	  	 {
      	  	 	var sceneEntity:IEntity = BasicSpatialManager2D(this.spatialManager).owner;
      	  	 	_scene = BaseSceneComponent(sceneEntity.lookupComponentByType(BaseSceneComponent));
      	  	 }
      	  	 if (_scene==null) return;
      	  }

      	  var worldPoint:Point = _scene.transformScreenToWorld(
      	     new Point(Global.mainStage.mouseX,Global.mainStage.mouseY));

      	  position.x = worldPoint.x;
      	  position.y = worldPoint.y;       	  	

      }

      private var _scene:BaseSceneComponent = null;

   }
}

Last but not the least … don’t forget to Mouse.hide()

See example of this tutorial in action

Tags: ,

Leave a Reply

Spam Protection by WP-SpamFree