Create touch screen controls (DPAD and buttons)

(fedyfausto) #1

Like title you never tried make touch buttons for mobile with fp? :3

(Zachary Lewis) #2

You could just make a mask for each button, then check to see if the mouse was clicked there (or a touch, but I’ve not messed with AIR’s mobile API before).

(fedyfausto) #3

the problem is this, if i create my button and set it parallax to 0 (for not move with camera and stay on screen) the mask stay in FIRST position (if i move to right, my button remain on screen [move with camera] but the mask stay back), and if i resize the screen game the mask dont move with button :frowning:

(Zachary Lewis) #4

You could wrap the controls in an Entity and update its position with the camera.

Alternatively, you could just use ActionScript to add a couple movie clips and set event listeners to them outside of the FlashPunk engine. That way, they’d stay relative to the stage and not to the Engine.

(Darien) #5

I’ve created Entities for my controls in the past, and it’s worked quite well.

(fedyfausto) #6

can you post the code and how can i insert these in world? :frowning:

(Abel Toy) #7

you can still check collisions with the mouse without taking into account the camera movement. What code are you using?

(rostok) #8

in my game, I used https://github.com/duckleg/as3dpad code. it places extra sprites (virtual joystick, and jump buttons) on top of FP. integrating it with FP is pretty straightforward - on every touch event I modify net.flashpunk.util.Input. however my personal opinion is that on-screen virtual joystick for tablet/smartphone game is not really convenient and I prefer simple onscreen buttons.

(VanderJamesHum) #9

Here’s another system some may have seen. I like using it as it interprets things down to keyboard inputs you choose and displays that key on the actual button.Though i’ve had to tweak it somewhat to work properly while i’m FP.Scaling * 2.

(fedyfausto) #10

i’m using it but i have problems when the screen scale :frowning:

(VanderJamesHum) #11

`hey fedyfausto, its pretty simple. You just need to modify the Touchkey.as file. Assuming your screen scale is * 2, all you need to do is then DIVIDE the collision x and y in the alwaysinbeta TouchKey class by 2…

	private function onTouchBegin(event : TouchEvent) : void {
		if (collidePoint(this.x, this.y, event.stageX/2, event.stageY/2)) {
			_touchPointID = event.touchPointID;
			FP.stage.dispatchEvent(new KeyboardEvent(KeyboardEvent.KEY_DOWN, false, false, 0, _keyCode));
		}
	}



	// and the same for testing with a mouse on desktop


private function onMouseDown(event : MouseEvent) : void {
	if (collidePoint(this.x, this.y, event.stageX/2, event.stageY/2)) {
			FP.stage.dispatchEvent(new KeyboardEvent(KeyboardEvent.KEY_DOWN, false, false, 0, _keyCode));
		}
	}

Notice that event.stageX and event.stageY have now been divided by two which will put the collision in line with actual buttons. Also, making the pixels twice as big means the buttons will be twice as big, but you can fix or change the size of the buttons in the KeyGraphic class by changing the radius of the circle from

		var radius : int = 40;

to

		var radius : int = 20;

This works only for the touch-key buttons, I haven’t tried adding the 8 way d-pad this way because it sucks joystick