How to Zoom and Offset camera to unknown values?

Author

Message

Scraggle

Moderator

21

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 19th Oct 2017 10:56 Edited at: 19th Oct 2017 12:42

Link

Hey,

The short question:
How do I position the 2D 'camera' so that I am viewing an area of the world at a specific size on screen and centred at a specific location on screen?

The longer question:
Imagine the game "Settlers" for an example of what I am trying to do.
Pretend you have a world that is 10x10 screen units in size (for example).
Now you click a button to focus on something that is currently off-screen (a house perhaps).
You want the camera zoomed in on the house so that the house occupies 1/4 of the screen (regardless of the actual dimensions of the house). But also because of HUD elements you need it to be offset from the centre of the screen to be positioned at some arbitrary co-ordinates.

Obviously I can't just set the zoom to a value - I would need to calculate it based on the size of the display and the size of the 'house'
And setting the offset would also need calculating so that the 'house' is centred at the location I want.

Any takers?

[EDIT] Another way to describe what I'm trying to achieve: I would like to shift and zoom the world so that a sprite within the world is positioned within a "window" of a given size and position on screen.

Happy Flapper
Additional Image Functions (9 sprite slicing etc.)
Additional String Functions
XML read, write, parse
Black theme for Geeny
RGB->HSV->RGB
SpriteSheet XML Control

Back to top

Profile PM Email

PartTimeCoder

AGK Tool Maker

9

Years of Service

User Offline

Joined: 9th Mar 2015

Location: London UK

Posted: 19th Oct 2017 12:49

Link

I experimented with something like this a while ago but without the use of 'views' I gave up as the current AppGameKit system is a bit primitive, In GM:S this is very easy.

However, I did roadmap a plan (but never got round to coding it) to make a view system, grab desired area of the back buffer at the default res and resize the image giving the effect of zooming, you then use sprites as view areas, but this would mean grabbing the buffer, updating the sprite on each frame effectively taking over the drawing process so I'm not sure how practical the idea would be, I wanted the same kind of thing but also with a mini map.

I did also consider a 3D ortho topdown system to gain more control over the camera, but life got in the way.

Back to top

Profile PM

CJB

Valued Member

20

Years of Service

User Offline

Joined: 10th Feb 2004

Location: Essex, UK

Posted: 19th Oct 2017 14:42

Link

You can use ScreenToWorldX and ScreenToWorldY in conjunction with GetPointerX and GetPointerY to get the click location in world coordinates, and use SetViewOffset and SetViewZoom close in on the click.

Here's a really rough example (click around to jump/zoom to click location):

// Project: offsetzoomtest 
// Created: 2017-10-19

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "offsetzoomtest" )
SetWindowSize( 320, 240, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 100, 100 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

// create some random imagery

for t = 1 to 500
	CreateSprite(t,CreateImageColor(random(0,255),random(0,255),random(0,255),255))
	SetSpriteSize(t,random(3,20),random(3,20))
	SetSpritePositionByOffset(t,random(0,1000),random(0,1000))
next t

CurrentViewX# = 500.0
CurrentViewy# = 500.0
CurrentZoom# = 1.0

SetViewZoomMode(1)

do
	if GetPointerPressed()
		clickx# = ScreenToWorldX(GetPointerX())
		clicky# = ScreenToWorldY(GetPointerY())
		SetViewOffset(clickx#-50.0,clicky#-50.0)
		CurrentZoom# = 2.0
	endif
	
	SetViewZoom(CurrentZoom#)
	CurrentZoom# = CurrentZoom# - 0.03
	if CurrentZoom# < 1.0 then CurrentZoom# = 1.0
	
	print( GetViewOffsetX())
	print( GetViewOffsetY())
    Print( ScreenFPS() )
    Sync()
loop

+ Code Snippet


// Project: offsetzoomtest 
// Created: 2017-10-19

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "offsetzoomtest" )
SetWindowSize( 320, 240, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 100, 100 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 ) // since version 2.0.22 we can use nicer default fonts

// create some random imagery

for t = 1 to 500
	CreateSprite(t,CreateImageColor(random(0,255),random(0,255),random(0,255),255))
	SetSpriteSize(t,random(3,20),random(3,20))
	SetSpritePositionByOffset(t,random(0,1000),random(0,1000))
next t

CurrentViewX# = 500.0
CurrentViewy# = 500.0
CurrentZoom# = 1.0    

SetViewZoomMode(1)



do
	if GetPointerPressed()
		clickx# = ScreenToWorldX(GetPointerX())
		clicky# = ScreenToWorldY(GetPointerY())
		SetViewOffset(clickx#-50.0,clicky#-50.0)
		CurrentZoom# = 2.0
	endif
	
	SetViewZoom(CurrentZoom#)
	CurrentZoom# = CurrentZoom# - 0.03
	if CurrentZoom# < 1.0 then CurrentZoom# = 1.0
	
	print( GetViewOffsetX())
	print( GetViewOffsetY())
    Print( ScreenFPS() )
    Sync()
loop

Obvious improvements would include tweening to new location and tweening the zoom level to make it all nice and smooth.

(Sorry if I've got the wrong idea!)

Aaargh! Ducks!
Phone Tap!
Uzmadesign

Back to top

Profile PM Email Website

Scraggle

Moderator

21

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 19th Oct 2017 14:58

Link

Thanks for your input, but no, that's not what I'm trying to do.
Here's what I have so far:

#constant KEY_SHIFT 16

type tDisplay
	l as integer
	t as integer
	r as integer
	b as integer
	w as integer
	h as integer
	cx as integer
	cy as integer
endtype

type tPoint
	x as float
	y as float
endtype

type tZoom
	view as tDisplay
endtype

w = 648
h = 480
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)

global spr as integer[1]
global zoom as tZoom

spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 0, 0, 255, 255)
SetSpriteSize(spr[0], 255, 255)
SetSpritePosition(spr[0], 300, 300)

spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 255, 0, 0, 255)
SetSpriteSize(spr[1], 128, 128)
SetSpritePosition(spr[1], 10, 200)

SetZoomViewArea(100, 150, 100, 100)

global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer

SetViewZoomMode(1)

w = MakeColor(255, 255, 255)
do
	DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
	GetUserInput()
	print("Click and drag mouse to change offset")
	print("Press 1 to zoom into Blue square")
	print("Press 2 to zoom into RED square")
	print("")
	print("Zoom: "+str(GetViewZoom()))
	print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
	sync()
loop

function GetUserInput()
	if GetRawMouseLeftPressed()
		viewOffset.x = GetPointerX()
		viewOffset.y = GetPointerY()
	endif
	if GetRawMouseLeftState()
		SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
		viewOffset.x = GetPointerX()
		viewOffset.y = GetPointerY()
	endif

mwdelta# = GetRawMouseWheelDelta()
	if mwdelta# <> 0.0
		if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
		SetViewZoom(GetViewZoom()+mwdelta#*0.01)
	endif

for k = 49 to 50
		if GetRawKeyPressed(k)
			currentSprite = k-49
			FocusCameraOnSprite(spr[k-49])
		endif
	next k
endfunction

function SetZoomViewArea(x, y, w, h)
	zoom.view.l = x
	zoom.view.t = y
	zoom.view.w = w
	zoom.view.h = h
	zoom.view.r = x+w
	zoom.view.b = y+h
	zoom.view.cx = x+(w/2)
	zoom.view.cy = y+(h/2)
endfunction

function FocusCameraOnSprite(s)
	SetViewZoom(zoom.view.w/GetSpriteWidth(s))
	SetViewOffset(GetSpriteXByOffset(s)-zoom.view.cx, GetSpriteYByOffset(s)-zoom.view.cy)
endfunction

+ Code Snippet

#constant KEY_SHIFT 16

type tDisplay
	l as integer
	t as integer
	r as integer
	b as integer
	w as integer
	h as integer
	cx as integer
	cy as integer
endtype

type tPoint
	x as float
	y as float
endtype

type tZoom
	view as tDisplay
endtype


w = 648
h = 480
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)

global spr as integer[1]
global zoom as tZoom

spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 0, 0, 255, 255)
SetSpriteSize(spr[0], 255, 255)
SetSpritePosition(spr[0], 300, 300)

spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 255, 0, 0, 255)
SetSpriteSize(spr[1], 128, 128)
SetSpritePosition(spr[1], 10, 200)

SetZoomViewArea(100, 150, 100, 100)

global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer

SetViewZoomMode(1)

w = MakeColor(255, 255, 255)
do
	DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
	GetUserInput()
	print("Click and drag mouse to change offset")
	print("Press 1 to zoom into Blue square")
	print("Press 2 to zoom into RED square")
	print("")
	print("Zoom: "+str(GetViewZoom()))
	print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
	sync()
loop


function GetUserInput()
	if GetRawMouseLeftPressed()
		viewOffset.x = GetPointerX()
		viewOffset.y = GetPointerY()
	endif
	if GetRawMouseLeftState()
		SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
		viewOffset.x = GetPointerX()
		viewOffset.y = GetPointerY()
	endif

	mwdelta# = GetRawMouseWheelDelta()
	if mwdelta# <> 0.0
		if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
		SetViewZoom(GetViewZoom()+mwdelta#*0.01)
	endif

	for k = 49 to 50
		if GetRawKeyPressed(k)
			currentSprite = k-49
			FocusCameraOnSprite(spr[k-49])
		endif
	next k
endfunction


function SetZoomViewArea(x, y, w, h)
	zoom.view.l = x
	zoom.view.t = y
	zoom.view.w = w
	zoom.view.h = h
	zoom.view.r = x+w
	zoom.view.b = y+h
	zoom.view.cx = x+(w/2)
	zoom.view.cy = y+(h/2)
endfunction


function FocusCameraOnSprite(s)
	SetViewZoom(zoom.view.w/GetSpriteWidth(s))
	SetViewOffset(GetSpriteXByOffset(s)-zoom.view.cx, GetSpriteYByOffset(s)-zoom.view.cy)
endfunction

You can move the offset by clicking and dragging the mouse.
And zoom with the mouse wheel.
Pressing 1 will focus on the blue sprite and pressing 2 will focus on the red sprite.
The white square is the area of the screen that I want the red/blue sprites to be focused.

With this code the zoom sets correctly to fit the sprites into the white square but the offset is wrong. I can change the code to get the offset correct but only when the zoom is 1.0. I can't seem to get the zoom and offset to play nicely together.

Happy Flapper
Additional Image Functions (9 sprite slicing etc.)
Additional String Functions
XML read, write, parse
Black theme for Geeny
RGB->HSV->RGB
SpriteSheet XML Control

Back to top

Profile PM Email

CJB

Valued Member

20

Years of Service

User Offline

Joined: 10th Feb 2004

Location: Essex, UK

Posted: 19th Oct 2017 15:29

Link

Try this:

get current zoom value
set zoom to 1
set offset
restore zoom value
sync

Aaargh! Ducks!
Phone Tap!
Uzmadesign

Back to top

Profile PM Email Website

Scraggle

Moderator

21

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 19th Oct 2017 15:44

Link

Thanks again but no.
I don't want to restore the current zoom value I want to change it.
I want to change the zoom and offset so that the sprite appears in the square and fills the square.

Happy Flapper
Additional Image Functions (9 sprite slicing etc.)
Additional String Functions
XML read, write, parse
Black theme for Geeny
RGB->HSV->RGB
SpriteSheet XML Control

Back to top

Profile PM Email

CJB

Valued Member

20

Years of Service

User Offline

Joined: 10th Feb 2004

Location: Essex, UK

Posted: 19th Oct 2017 17:27

Link

Getting closer. I've got it to zoom / offset to the same area for the red / blue sprites (need to take into account the amount of zoom), just not quite in the right place yet... I'll take another look when I get home but you'll have probably sorted it by then:

+ Code Snippet

    SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+(zoom.view.cx/GetViewZoom()), GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+(zoom.view.cy/GetViewZoom()))

Aaargh! Ducks!
Phone Tap!
Uzmadesign

Back to top

Profile PM Email Website

Scraggle

Moderator

21

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 19th Oct 2017 17:32

Link

Quote: "just not quite in the right place yet"

That's exactly where I'm at too. Thanks for looking

Happy Flapper
Additional Image Functions (9 sprite slicing etc.)
Additional String Functions
XML read, write, parse
Black theme for Geeny
RGB->HSV->RGB
SpriteSheet XML Control

Back to top

Profile PM Email

puzzler2018

User Banned

Posted: 19th Oct 2017 19:13

Link

Ive just looked at Settlers and got the gist of what trying to achieve.

If you still need some help in making the camera do what settlers does - then ill have a go at knocking something up on Saturday

Back to top

Profile

CJB

Valued Member

20

Years of Service

User Offline

Joined: 10th Feb 2004

Location: Essex, UK

Posted: 19th Oct 2017 20:25

Link

Does this work? (I added a zoom adjusted offset in addition to the individual zoom adjusted sprite offsets)

#constant KEY_SHIFT 16
 
type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype
 
type tPoint
    x as float
    y as float
endtype
 
type tZoom
    view as tDisplay
endtype
 
 
w = 648
h = 480
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)
 
SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)
 
global spr as integer[1]
global zoom as tZoom
 
spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 0, 0, 255, 255)
SetSpriteSize(spr[0], 255, 255)
SetSpritePosition(spr[0], 300, 300)

spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 255, 0, 0, 255)
SetSpriteSize(spr[1], 128, 128)
SetSpritePosition(spr[1], 10, 200)

SetZoomViewArea(100, 150, 100, 100)
 
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer
 
SetViewZoomMode(1)
 
w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into Blue square")
    print("Press 2 to zoom into RED square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    sync()
loop
 
 
function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
 
    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif
 
    for k = 49 to 50
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction
 
 
function SetZoomViewArea(x, y, w, h)
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction
 
 
function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
//    SetViewOffset(GetSpriteXByOffset(s)-zoom.view.cx, GetSpriteYByOffset(s)-zoom.view.cy)

SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+(zoom.view.cx/GetViewZoom())+(23/getviewzoom()), GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+(zoom.view.cy/GetViewZoom())-(160/getviewzoom()))

endfunction

+ Code Snippet

#constant KEY_SHIFT 16
 
type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype
 
type tPoint
    x as float
    y as float
endtype
 
type tZoom
    view as tDisplay
endtype
 
 
w = 648
h = 480
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)
 
SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)
 
global spr as integer[1]
global zoom as tZoom
 
spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 0, 0, 255, 255)
SetSpriteSize(spr[0], 255, 255)
SetSpritePosition(spr[0], 300, 300)
 



spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 255, 0, 0, 255)
SetSpriteSize(spr[1], 128, 128)
SetSpritePosition(spr[1], 10, 200)
 


SetZoomViewArea(100, 150, 100, 100)
 
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer
 
SetViewZoomMode(1)
 
w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into Blue square")
    print("Press 2 to zoom into RED square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    sync()
loop
 
 
function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
 
    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif
 
    for k = 49 to 50
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction
 
 
function SetZoomViewArea(x, y, w, h)
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction
 
 
function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
//    SetViewOffset(GetSpriteXByOffset(s)-zoom.view.cx, GetSpriteYByOffset(s)-zoom.view.cy)

SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+(zoom.view.cx/GetViewZoom())+(23/getviewzoom()), GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+(zoom.view.cy/GetViewZoom())-(160/getviewzoom()))

endfunction

Aaargh! Ducks!
Phone Tap!
Uzmadesign

Back to top

Profile PM Email Website

Scraggle

Moderator

21

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 20th Oct 2017 07:38 Edited at: 20th Oct 2017 08:06

Link

Thanks CJB.
That's a step in the right direction but not right yet. It works perfectly for that set-up but it uses nasty hard coded numbers!
Your code works great until you change either the display size or the zoom areas size and/or position.

I'll keep working on it but ideally I need it to work on whatever display it is running on and for any zoom size/position.

Thanks

If you remove this line:

+ Code Snippet

SetViewZoom(zoom.view.w/GetSpriteWidth(s))

Then the camera positions itself perfectly over each sprite but only if the zoom as 1.0
So, I'm thinking - I need to find the size of the world that is currently within the display bounds and work out that as a percentage of the actual pixel size of the display then use that value to offset the offset (or something). I'll keep playing.

Happy Flapper
Additional Image Functions (9 sprite slicing etc.)
Additional String Functions
XML read, write, parse
Black theme for Geeny
RGB->HSV->RGB
SpriteSheet XML Control

Back to top

Profile PM Email

Preben

AGK Studio Developer

20

Years of Service

User Offline

Joined: 30th Jun 2004

Location:

Posted: 21st Oct 2017 14:55 Edited at: 21st Oct 2017 22:27

Link

Hi Scraggle,

I changed CJB version so it works on all resolutions and sprite positions , i never tried any of these commands , so i just aligned CJB code to take resolution into account, and it works

#constant KEY_SHIFT 16
  
type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype
  
type tPoint
    x as float
    y as float
endtype
  
type tZoom
    view as tDisplay
endtype
  
  
w = 1024
h = 768
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)
  
global spr as integer[1]
global zoom as tZoom
  
spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 0, 0, 255, 255)
SetSpriteSize(spr[0], 255, 255)
SetSpritePosition(spr[0], 300, 300)
  
 
 
 
spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 255, 0, 0, 255)
SetSpriteSize(spr[1], 128, 128)
SetSpritePosition(spr[1], 10, 200)

SetZoomViewArea(100+ ( ((GetVirtualWidth()-640.0)-8) /4.0), 150+ ((GetVirtualHeight()-480.0)/4.0), 100, 100)
  
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer
  
SetViewZoomMode(1)
  
w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into Blue square")
    print("Press 2 to zoom into RED square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    sync()
loop
  
  
function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
  
    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif
  
    for k = 49 to 50
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction
  
  
function SetZoomViewArea(x, y, w, h)
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction
  
  
function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
	SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+(zoom.view.cx/GetViewZoom())+(23/getviewzoom()), GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+(zoom.view.cy/GetViewZoom())-(160/getviewzoom()))
endfunction

+ Code Snippet

#constant KEY_SHIFT 16
  
type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype
  
type tPoint
    x as float
    y as float
endtype
  
type tZoom
    view as tDisplay
endtype
  
  
w = 1024
h = 768
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)
  
global spr as integer[1]
global zoom as tZoom
  
spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 0, 0, 255, 255)
SetSpriteSize(spr[0], 255, 255)
SetSpritePosition(spr[0], 300, 300)
  
 
 
 
spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 255, 0, 0, 255)
SetSpriteSize(spr[1], 128, 128)
SetSpritePosition(spr[1], 10, 200)

SetZoomViewArea(100+ ( ((GetVirtualWidth()-640.0)-8) /4.0), 150+ ((GetVirtualHeight()-480.0)/4.0), 100, 100)
  
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer
  
SetViewZoomMode(1)
  
w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into Blue square")
    print("Press 2 to zoom into RED square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    sync()
loop
  
  
function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
  
    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif
  
    for k = 49 to 50
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction
  
  
function SetZoomViewArea(x, y, w, h)
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction
  
  
function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
	SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+(zoom.view.cx/GetViewZoom())+(23/getviewzoom()), GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+(zoom.view.cy/GetViewZoom())-(160/getviewzoom()))
endfunction

Subscribe and checkout great AppGameKit video's here: Videos click here
Latest GameGuru Loader news: News click here
best regards Preben Eriksen,

Back to top

Profile PM Email

Scraggle

Moderator

21

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 23rd Oct 2017 07:37 Edited at: 23rd Oct 2017 07:39

Link

Thanks for your input Preben.

Unfortunately that still doesn't work for all cases. If you change the position and/or size of the 'ZoomViewArea' then the system fails.
I've taken your version of the code and changed it slightly so that each run will give a different resolution, and a different position and size of the 'ZoomViewArea'.

#constant KEY_SHIFT 16

type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype

type tPoint
    x as float
    y as float
endtype

type tZoom
    view as tDisplay
endtype

w = random(500, 1000)
h = random(500, 1000)
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)

global spr as integer[2]
global zoom as tZoom

spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 255, 0, 0, 255)
SetSpriteSize(spr[0], 50, 50)
SetSpritePosition(spr[0], 300, 300)

spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 0, 255, 0, 255)
SetSpriteSize(spr[1], 100, 100)
SetSpritePosition(spr[1], 100, 200)

spr[2] = CreateSprite(0)
SetSpriteColor(spr[2], 0, 0, 255, 255)
SetSpriteSize(spr[2], 150, 150)
SetSpritePosition(spr[2], 200, 100)

sz = random(50, 150)
SetZoomViewArea(random(10, 400), random(10, 400), sz, sz)

global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer

SetViewZoomMode(1)

w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into RED square")
    print("Press 2 to zoom into GREEN square")
    print("Press 3 to zoom into BLUE square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    sync()
loop

function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif

mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif

for k = 49 to 51
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction

function SetZoomViewArea(x, y, w, h)
	x = x + ((GetVirtualWidth()-640.0)-8)/4.0
	y = y + (GetVirtualHeight()-480.0)/4.0
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction

function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
    SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+(zoom.view.cx/GetViewZoom())+(23/getviewzoom()), GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+(zoom.view.cy/GetViewZoom())-(160/getviewzoom()))
endfunction

+ Code Snippet

#constant KEY_SHIFT 16

type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype

type tPoint
    x as float
    y as float
endtype

type tZoom
    view as tDisplay
endtype

w = random(500, 1000)
h = random(500, 1000)
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)

global spr as integer[2]
global zoom as tZoom

spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 255, 0, 0, 255)
SetSpriteSize(spr[0], 50, 50)
SetSpritePosition(spr[0], 300, 300)

spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 0, 255, 0, 255)
SetSpriteSize(spr[1], 100, 100)
SetSpritePosition(spr[1], 100, 200)

spr[2] = CreateSprite(0)
SetSpriteColor(spr[2], 0, 0, 255, 255)
SetSpriteSize(spr[2], 150, 150)
SetSpritePosition(spr[2], 200, 100)

sz = random(50, 150)
SetZoomViewArea(random(10, 400), random(10, 400), sz, sz)

global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer

SetViewZoomMode(1)

w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into RED square")
    print("Press 2 to zoom into GREEN square")
    print("Press 3 to zoom into BLUE square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    sync()
loop


function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif

    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif

    for k = 49 to 51
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction


function SetZoomViewArea(x, y, w, h)
	x = x + ((GetVirtualWidth()-640.0)-8)/4.0
	y = y + (GetVirtualHeight()-480.0)/4.0
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction


function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
    SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+(zoom.view.cx/GetViewZoom())+(23/getviewzoom()), GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+(zoom.view.cy/GetViewZoom())-(160/getviewzoom()))
endfunction

The main change that I made is to functionalise the input variables for SetViewZoomArea() so we can move the calculations from the function call to the function implementation.
When you run this you see that the zoom level works correctly but the offset is still skewed.
I had a busy weekend so I didn't get chance to work with it until this morning. I'll keep trying things but still welcome anyone's help.

I'm intrigued by the hardcoded numbers. Obviously nothing should be hardcoded for a dynamic system like this but I'm wondering how you have come up with them? Knowing how they were calculated for one particular set-up should help determine how to calculate them dynamically.

Thanks

Happy Flapper
Additional Image Functions (9 sprite slicing etc.)
Additional String Functions
XML read, write, parse
Black theme for Geeny
RGB->HSV->RGB
SpriteSheet XML Control

Back to top

Profile PM Email

CJB

Valued Member

20

Years of Service

User Offline

Joined: 10th Feb 2004

Location: Essex, UK

Posted: 23rd Oct 2017 13:43

Link

What do those numbers actually represent? Let's pseudo code it:

if 1 is pressed
set zoom to required amount based on size of target sprite
put target sprite in centre of screen
offset view so target sprite appears in target destination box (This is where those hard-coded numbers come in)
end if.

So... this should work:

#constant KEY_SHIFT 16
 
type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype
 
type tPoint
    x as float
    y as float
endtype
 
type tZoom
    view as tDisplay
endtype
 
w = random(500, 1000)
h = random(500, 1000)
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)
 
SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)
 
global spr as integer[2]
global zoom as tZoom
 
spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 255, 0, 0, 255)
SetSpriteSize(spr[0], 50, 50)
SetSpritePosition(spr[0], 300, 300)
 
spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 0, 255, 0, 255)
SetSpriteSize(spr[1], 100, 100)
SetSpritePosition(spr[1], 100, 200)
 
spr[2] = CreateSprite(0)
SetSpriteColor(spr[2], 0, 0, 255, 255)
SetSpriteSize(spr[2], 150, 150)
SetSpritePosition(spr[2], 200, 100)
 
sz = random(50, 150)
SetZoomViewArea(random(10, 400), random(10, 400), sz, sz)
 
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer
 
SetViewZoomMode(1)
 
w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into RED square")
    print("Press 2 to zoom into GREEN square")
    print("Press 3 to zoom into BLUE square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
	print("Virutal Width: "+str(GetVirtualWidth()))
    sync()
loop
 
 
function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
 
    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif
 
    for k = 49 to 51
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction
 
 
function SetZoomViewArea(x, y, w, h)
    x = x + ((GetVirtualWidth()-640.0)-8)/4.0
    y = y + (GetVirtualHeight()-480.0)/4.0
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction
 
 
function FocusCameraOnSprite(s)

SetViewZoom(zoom.view.w/GetSpriteWidth(s))
    
    gvz#=zoom.view.w/GetSpriteWidth(s)

diffx# = ((GetVirtualWidth()/2.0) - zoom.view.cx)/gvz#
    diffy# = ((GetVirtualHeight()/2.0) - zoom.view.cy)/gvz#
    
    SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+diffx#, GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+diffy#)

endfunction

+ Code Snippet

#constant KEY_SHIFT 16
 
type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype
 
type tPoint
    x as float
    y as float
endtype
 
type tZoom
    view as tDisplay
endtype
 
w = random(500, 1000)
h = random(500, 1000)
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)
 
SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)
 
global spr as integer[2]
global zoom as tZoom
 
spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 255, 0, 0, 255)
SetSpriteSize(spr[0], 50, 50)
SetSpritePosition(spr[0], 300, 300)
 
spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 0, 255, 0, 255)
SetSpriteSize(spr[1], 100, 100)
SetSpritePosition(spr[1], 100, 200)
 
spr[2] = CreateSprite(0)
SetSpriteColor(spr[2], 0, 0, 255, 255)
SetSpriteSize(spr[2], 150, 150)
SetSpritePosition(spr[2], 200, 100)
 
sz = random(50, 150)
SetZoomViewArea(random(10, 400), random(10, 400), sz, sz)
 
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer
 
SetViewZoomMode(1)
 
w = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, w, w, w, w, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into RED square")
    print("Press 2 to zoom into GREEN square")
    print("Press 3 to zoom into BLUE square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
	print("Virutal Width: "+str(GetVirtualWidth()))
    sync()
loop
 
 
function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
 
    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif
 
    for k = 49 to 51
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k
endfunction
 
 
function SetZoomViewArea(x, y, w, h)
    x = x + ((GetVirtualWidth()-640.0)-8)/4.0
    y = y + (GetVirtualHeight()-480.0)/4.0
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction
 
 
function FocusCameraOnSprite(s)

    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
    
    gvz#=zoom.view.w/GetSpriteWidth(s)

    diffx# = ((GetVirtualWidth()/2.0) - zoom.view.cx)/gvz#
    diffy# = ((GetVirtualHeight()/2.0) - zoom.view.cy)/gvz#
    
    SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+diffx#, GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+diffy#) 

endfunction

Aaargh! Ducks!
Phone Tap!
Uzmadesign

Back to top

Profile PM Email Website

Scraggle

Moderator

21

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 23rd Oct 2017 17:01 Edited at: 23rd Oct 2017 17:06

Link

Thanks CJB,
That works a treat!

It's these numbers that concerned me:

+ Code Snippet

x = x + ((GetVirtualWidth()-640.0)-8)/4.0
    y = y + (GetVirtualHeight()-480.0)/4.0

Which I had taken from Preben's code when I moved it from here:

+ Code Snippet

SetZoomViewArea(100+ ( ((GetVirtualWidth()-640.0)-8) /4.0), 150+ ((GetVirtualHeight()-480.0)/4.0), 100, 100)

With your implementation of the FocusCameraOnSprite() function the above bit of code doesn't need to be there so all of the 'nasty' hard-coded numbers can be removed.

Thanks again, much appreciated!

And for anyone else that stumbles across this whilst looking for something similar, here is the final working implementation:

#constant KEY_SHIFT 16
#constant KEY_SPACE 32

type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype

type tPoint
    x as float
    y as float
endtype

type tZoom
    view as tDisplay
endtype

restart:
sync()
w = random(500, 1000)
h = random(500, 1000)
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)

global spr as integer[2]
global zoom as tZoom

spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 255, 0, 0, 64)
SetSpriteSize(spr[0], 50, 50)
SetSpritePosition(spr[0], 300, 300)

spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 0, 255, 0, 64)
SetSpriteSize(spr[1], 100, 100)
SetSpritePosition(spr[1], 100, 200)

spr[2] = CreateSprite(0)
SetSpriteColor(spr[2], 0, 0, 255, 64)
SetSpriteSize(spr[2], 150, 150)
SetSpritePosition(spr[2], 200, 100)

sz = random(50, 150)
SetZoomViewArea(random(10, 400), random(10, 400), sz, sz)
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer

SetViewZoomMode(1)

c = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, c, c, c, c, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into RED square")
    print("Press 2 to zoom into GREEN square")
    print("Press 3 to zoom into BLUE square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    print("Virutal Width: "+str(GetVirtualWidth()))
    sync()
loop

function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif

mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif

for k = 49 to 51
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k

if GetRawKeyPressed(KEY_SPACE) then goto restart
endfunction

function SetZoomViewArea(x, y, w, h)
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction

function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
    gvz#=zoom.view.w/GetSpriteWidth(s)
    diffx# = ((GetVirtualWidth()/2.0) - zoom.view.cx)/gvz#
    diffy# = ((GetVirtualHeight()/2.0) - zoom.view.cy)/gvz#
    SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+diffx#, GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+diffy#)
endfunction

+ Code Snippet

#constant KEY_SHIFT 16
#constant KEY_SPACE 32

type tDisplay
    l as integer
    t as integer
    r as integer
    b as integer
    w as integer
    h as integer
    cx as integer
    cy as integer
endtype

type tPoint
    x as float
    y as float
endtype

type tZoom
    view as tDisplay
endtype

restart:
sync()
w = random(500, 1000)
h = random(500, 1000)
SetVirtualResolution(w, h)
SetWindowSize(w, h, 0)

SetSyncRate(60, 0)
SetPrintSize(14)
UseNewDefaultFonts(1)

global spr as integer[2]
global zoom as tZoom

spr[0] = CreateSprite(0)
SetSpriteColor(spr[0], 255, 0, 0, 64)
SetSpriteSize(spr[0], 50, 50)
SetSpritePosition(spr[0], 300, 300)

spr[1] = CreateSprite(0)
SetSpriteColor(spr[1], 0, 255, 0, 64)
SetSpriteSize(spr[1], 100, 100)
SetSpritePosition(spr[1], 100, 200)

spr[2] = CreateSprite(0)
SetSpriteColor(spr[2], 0, 0, 255, 64)
SetSpriteSize(spr[2], 150, 150)
SetSpritePosition(spr[2], 200, 100)

sz = random(50, 150)
SetZoomViewArea(random(10, 400), random(10, 400), sz, sz)
global viewOffset as tPoint
global viewZoom as float
global currentSprite as integer

SetViewZoomMode(1)

c = MakeColor(255, 255, 255)
do
    DrawBox(zoom.view.l, zoom.view.t, zoom.view.r, zoom.view.b, c, c, c, c, 0)
    GetUserInput()
    print("Click and drag mouse to change offset")
    print("Press 1 to zoom into RED square")
    print("Press 2 to zoom into GREEN square")
    print("Press 3 to zoom into BLUE square")
    print("")
    print("Zoom: "+str(GetViewZoom()))
    print("Offset: "+str(GetViewOffsetX())+", "+str(GetViewOffsetY()))
    print("Virutal Width: "+str(GetVirtualWidth()))
    sync()
loop


function GetUserInput()
    if GetRawMouseLeftPressed()
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif
    if GetRawMouseLeftState()
        SetViewOffset(GetViewOffsetX() + GetPointerX() - viewOffset.x, GetViewOffsetY() + GetPointerY() - viewOffset.y)
        viewOffset.x = GetPointerX()
        viewOffset.y = GetPointerY()
    endif

    mwdelta# = GetRawMouseWheelDelta()
    if mwdelta# <> 0.0
        if GetRawKeyState(KEY_SHIFT) then mwdelta# = mwdelta#*3.5
        SetViewZoom(GetViewZoom()+mwdelta#*0.01)
    endif

    for k = 49 to 51
        if GetRawKeyPressed(k)
            currentSprite = k-49
            FocusCameraOnSprite(spr[k-49])
        endif
    next k

    if GetRawKeyPressed(KEY_SPACE) then goto restart
endfunction


function SetZoomViewArea(x, y, w, h)
    zoom.view.l = x
    zoom.view.t = y
    zoom.view.w = w
    zoom.view.h = h
    zoom.view.r = x+w
    zoom.view.b = y+h
    zoom.view.cx = x+(w/2)
    zoom.view.cy = y+(h/2)
endfunction


function FocusCameraOnSprite(s)
    SetViewZoom(zoom.view.w/GetSpriteWidth(s))
    gvz#=zoom.view.w/GetSpriteWidth(s)
    diffx# = ((GetVirtualWidth()/2.0) - zoom.view.cx)/gvz#
    diffy# = ((GetVirtualHeight()/2.0) - zoom.view.cy)/gvz#
    SetViewOffset(GetSpriteXByOffset(s)-(GetVirtualWidth()/2.0)+diffx#, GetSpriteYByOffset(s)-(GetVirtualHeight()/2.0)+diffy#)
endfunction

Happy Flapper
Additional Image Functions (9 sprite slicing etc.)
Additional String Functions
XML read, write, parse
Black theme for Geeny
RGB->HSV->RGB
SpriteSheet XML Control

Back to top

Profile PM Email

CJB

Valued Member

20

Years of Service

User Offline

Joined: 10th Feb 2004

Location: Essex, UK