Camera class with kinetics and pinch-to-zoom

Niicodemus

Hello everyone. I'm new to Gideros and have been benefiting greatly from the posts and examples here on the forum. I was recently implementing some camera support in my game, and found information on the web to be a little lacking on how to implement a few details, such as kinetics and smooth scaling from something other than the origin point of a sprite. So I took what I learned and created an example project with my new Camera class, so that it might be helpful to someone else. The code is available at https://github.com/nshafer/KineticZoomCamera . Here is the rough documentation I included.

Camera class.

This implements a camera class that allows the user to drag and zoom a virtual camera. It works basically by having child elements that are bigger than the view size of the given device. There isn't really a camera that moves, rather it just moves itself and any child elements relative to the devices normal view. Further, when the user lifts their finger in the middle of a drag, the drag movement will continue with some kinetic energy and slow down based on simulated friction.

This has two distinct modes, DRAG and SCALE, based on how many touches are detected. It doesn't combine them, but could be modified to do so. It will change smoothly between the modes, however.

Usage:

local camera = Camera.new()
local camera = Camera.new({maxZoom=1.5,friction=.5})
stage:addChild(camera)

-- Add whatever you want as a child of the camera
local image = Bitmap.new(Texture.new("sky_world_big.png"))
camera:addChild(image)

-- If you want to center the camera on a child element, such as a player, you can do:
local player = Sprite.new() -- example player sprite
camera:centerPoint(player:getX(), player:getY())

-- If you want to process touch events relative to where the camera is, you can translate the event
function onTouchBegin(event)
local point = camera:translateEvent(event)
-- point.x = x position of the touch relative to the camera
-- point.y = y position of the touch relative to the camera
end

Hopefully it's helpful to someone.

Thanks,
Nathan Shafer

Nascode

@Niicodemus wow thanks for your contribution! I am sure i will need it sometime

ar2rsawseen

Ooo, that looks awesome, will have a playtest with it

bravcm

Thank you!

hgvyas123

Great Thnx

Scouser

Hi @Niicodemus and welcome to the mad fun house:D

I will eventually get around to testing this out. Would be interesting to see if it can be used to zoom in/out on a TileMap.

Niicodemus

It works with any Sprite, or any derivative of a sprite. Just create your tilemap then camera:addChild(tilemap)

dreiko65

@Niicodemus. Looks awsome! I have a question though. Lets say I want a sprite to remain in the bottom left side of screen at all times while zooming in or out. How am I supposed to do that? Ive tried but no luck...

Niicodemus

@dreiko65, just add that sprite outside of the camera in the scene graph, and after the camera, so it will appear above it.

local camera = Camera.new()
stage:addChild(camera)

local corner_sprite = Sprite.new()
stage:addChild(corner_sprite)

dreiko65

@Niicodemus Yeah ok but then I wont be able to zoom on that sprite. I will give an example. I want to make a parallax background. I have several layers and all are children of the camera because I want the user to be able to zoom on them. And here is my prob. I want my games ground to be on the bottom of the screen permanently and also can be zoomed in and out along with the background..

Niicodemus

Ah yeah, when I went to add parallaxing backgrounds, I had to rewrite the entire thing. The camera class I have posted just won't support it. Unfortunately my new class that supports it isn't in a state where I can release it.

dreiko65

@Niicodemus thanks for your reply. I finaly made it. The solution is actually really simple. I used your camera class just for translating the touch events like pinch to zoom... and all the other assets I ve added them on stage. So now the whole trick is in the enter frame function.. for example sprite:setScale(camera:getScale())
Sprite:setY(dy+application:getContentHeight() - sprite:getHeight())
So now the sprite is always at the bottom of the screen and also can be zoomed in or out...
Good luck with your games..

Niicodemus

@dreiko65, I'm glad you were able to make it work. Good luck to you, too!