Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


6. April 2017

 

Following up on our keyboard handling tutorial, we carry on the HaxeFlixel tutorial series looking at how to handle mouse input.  Unlike keyboard input, polling isnt our only option, we can also have event driven mouse input.  Let’s take a look at how to do both.

Let’s start of with an example polling the mouse.  That is each frame we check for the status of the mouse and respond accordingly.  OK, code time.

import flixel.FlxState;
import flixel.FlxSprite;
import flixel.FlxG;

class PlayState extends FlxState
{
   var sprite:FlxSprite;
   var scaleFactor = 0.1;
   override public function create():Void
   {
      super.create();

      sprite = new FlxSprite();
      sprite.loadGraphic(AssetPaths.enemy__png);
      sprite.x = FlxG.width/2 - sprite.width/2;
      sprite.y = FlxG.height/2 - sprite.height/2;
      add(sprite);


   }

   override public function update(elapsed:Float):Void
   {
      super.update(elapsed);

      if(FlxG.mouse.overlaps(sprite)){
         if(FlxG.mouse.pressed){
            sprite.setPosition(FlxG.mouse.getPosition().x - sprite.width /2   ,
            FlxG.mouse.getPosition().y - sprite.height /2);
         }
      }
      if(FlxG.mouse.justReleasedRight){
         sprite.x = FlxG.width/2 - sprite.width/2;
         sprite.y = FlxG.height/2 - sprite.height/2;
         sprite.scale.set(1,1);
      }

      if(FlxG.mouse.wheel != 0){ 
         sprite.scale.add(FlxG.mouse.wheel * scaleFactor,FlxG.mouse.wheel * scaleFactor);
      }
   }
}

 

The following application is the result of the code above.  Left click and drag with left mouse button to move the sprite, right click to reset its location and use scroll wheel to scale.

You will notice that all our code resides in the update() method, meaning we will check the status of the mouse every frame.  Notice once again that all of the input code is contained in the FlxG class.  Next we use the handy built in overlaps() method which checks if the current position of the mouse overlaps the sprite.  We then check to see if mouse is pressed, by default this will refer to either a left click (or a touch).  Our next test is to see if the right mouse button was pressed then released with the method justReleasedRight(), which will be true once the mouse button is released.  Just like with the keyboard there is a difference between pressed and released in that pressed will be true constantly while the button is down, while released will only be true once per click.  Finally we check the status of the wheel.  FlxG.mouse.wheel represents the amount the wheel moved this frame.

 

Next we look at event driven mouse input.  Instead of checking the status of the mouse over and over like we do with polling, in this example we give HaxeFlixel a series of functions that will be called when input happens. 

import flixel.FlxG;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.input.mouse.FlxMouseEventManager;

class PlayState extends FlxState
{
   var sprite:FlxSprite;
   override public function create():Void
   {
      super.create();

      sprite = new FlxSprite();
      sprite.loadGraphic(AssetPaths.enemy__png);
      sprite.x = 200;
      sprite.y = 200;
      add(sprite);


      FlxMouseEventManager.add(sprite,
         function(s:FlxSprite){ trace("MouseDown");},
         function(s:FlxSprite){ trace("MouseUp");},
         function(s:FlxSprite){ trace("MouseOver");},
         onMouseOut
         );
   }

   override public function update(elapsed:Float):Void
   {
      super.update(elapsed);
   }

   public function onMouseOut(s:FlxSprite){
      trace("Mouse Out, sprite at: " + s.x + "," + s.y + " Mouse at: " + FlxG.mouse.getPosition());
   }
}

 

In this example we wire a number of event handlers up to our sprite object.  This is done via the FlxMouseEventManager for which we pass in the sprite we want to track mouse input for and a series of 4 functions that will be called when various different actions occur.  Those actions are mouse down (any button), mouse up (any button released), mouse over ( the mouse is within the sprite’s bounds) and mouse out ( the mouse leaves the sprite’s bounds).  In this case I used 3 anonymous functions which simply print out the event that occurred.  For the onMouseOut event I instead implemented a member function, mostly just to show that different options you have.  You’ll notice in onMouseOut we ask for the mouse’s position using FlxG.mouse.getPosition().  In a similar manner you can poll the mouse for a great deal of additional information such as it’s location, button and wheel status and more.

 

The choice between polled input, event driven input or a hybrid of both is completely up to you. 

 

The Video

Programming , , ,

blog comments powered by Disqus

Month List

Popular Comments