Change the View Offset

[c0d3r9Participant]

Is it possible to set the offset from the view?
I.e. if i have a a map with a width 1000px and the virtual resolution 500px and with the offset i can scroll left and right.

I know how i can draw a tilemap only the tiles who needed but for little tilemaps that would be useful for scrolling.

btw. In this case is it possible to fix the position of a sprite on screen.(so it doesn´t scroll)
Alternative i can calculate the new position every time of course.

[Abe _King_Participant]

Not exactly sure what you’re looking for but I’m assuming you’re looking for working with applying transformations to the canvas??

The basic ones I can recommend to start out with would be translating the canvas and scaling the canvas. Utilizing both could allow you to create something of a camera that can pan and zoom.

 

Monkey

canvas.Scale( New Vec2f( Scale ) ) canvas.Translate( Location )

1 2	canvas.Scale( New Vec2f( Scale ) ) canvas.Translate( Location )

These both have different effects on the way things are drawn if you do them in a certain order. I recommend applying these transformations prior to any drawing.

[c0d3r9Participant]

Imagine i have a tilemap.
Each tile 64x64px and the map is i.e. 500×500 tiles.

The view offset change the area that shows the tiles depend from the resolution.
Note: i would draw all tiles in this case.

Like camera movent in 3d.u know?
In 3d i can sprites positioning on screen coordinates and then there are worldcoordinates for the 3d world.

Imagine a 3d plane for the tilemap and with the camera movement i can scroll around the tilemap.

Or i have to calculate the tileposition for each tile every onrender.(and so i need to draw only the visible tiles)

Here an explantation from sfml.better to understand: https://www.sfml-dev.org/tutorials/2.5/graphics-view.php

Edit: i found

Monkey

Canvas.Viewport:std.geom.Recti

1	Canvas.Viewport:std.geom.Recti

Maybe thats what i need.
Test it if i have time

[coconParticipant]

I had some need about this a while ago.

Trying to pan and zoom

[Abe _King_Participant]

@c0d3r9

I’m not sure what you’re trying to do anymore, you may need to clarify more specifically the goal and what you are presently using to achieve the goal.

[c0d3r9Participant]

Haven´t time to code the last days.and its to hot

In short, imagine you have a tilemap wich is drawn complete and then have a size much bigger like the screen resolution.
With the “view offset” you can change the position of the rectangular view was shown on screen.
I.e. a map width 5000px and height 2000px.
The start view offset is 0, 0 then the view represents  from 0 to screenwidth, 0 to screenheight.
If you now change this offset i.e. 100px on the x position now you see 100 to screenwidth+100.
Its like a 2d camera.
You have a big tilemap(or one big image) and you can move the “cameraview” across this map.

I hope I could explain it well.
My link from sfml explain it as best i think.

[GwenelParticipant]

Think I know what you mean I dont know much but this I know. Heres an example for you I made because I know this is abit tricky in the beginining buts its really easy when you see it in action.

The codebox is strange but I made the codefor my friend as tutorial. Here it is with proper formatting.

https://ufile.io/nwy8j

 

Monkey

Namespace Myapp #Import "<std>" #Import "<mojo>" #Import "assets/" Using std.. Using mojo.. ' This example assumes you have a 128x128 image ready with lots of 8x8 tiles in it, or it could be anything you'll still see the effect. Const w:=2732.0/2.0, h:=2048.0/2.0 ' Display resolution Class Myapp Extends Window Field canvas:Canvas Field image:Image Field s:Int, wx:Int, wy:Int Field tilemap:Int[] = New Int[512*512] ' Create a world made of 512 x 512 tiles Field size:Int=32 ' Tilesize, change to anything you'd like Field xsprite:Int = 2000, ysprite:Int = 256, xd:Int = -4 ' An example of an enemy Method New( title:String="Myapp",width:Int=w,height:Int=h,flags:WindowFlags=WindowFlags.Resizable) Super.New("Myapp",w,h,flags) ' Create a random example world of tiles For Local y:=0 To 511 For Local x:=0 To 511 tilemap[x + y * 512] = Int(Rnd(127)) Next Next image=Image.Load("asset::128x1282.png", Null,Null) End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Clear(Color.Black) Local scrx:=wx Mod size Local scry:=wy Mod size Local mapx:=wx / size Local mapy:=wy / size Local cnty:= -scry For Local y:=mapy To (mapy+(h/size)+1) Local cntx:=-scrx For Local x:=mapx To (mapx+(w/size)+1) Local char:= tilemap[x + y * 128] Local tilex:= char & 7 Local tiley:= char Shr 3 canvas.DrawRect(cntx,cnty,size,size,image,tilex Shl 3,tiley Shl 3,8,8) ' Hardcoded to get its sprites from a 128x128px tilesheet made up of 8x8px tiles (Shl 3 = * 8) cntx=cntx+size Next cnty=cnty+size Next ' Do something like checking for exit and create some movement.If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() ' Put a slow automatic scrolling to the right of the world wx=wx+1 ' Add manual scrolling using cursor keys Local s:=4 ' Manual scrollspeed wx = wx - s * Int(Keyboard.KeyDown(Key.Left)) + s * Int(Keyboard.KeyDown(Key.Right)) wy = wy - s * Int(Keyboard.KeyDown(Key.Up)) + s * Int(Keyboard.KeyDown(Key.Down)) wx=Max(0,Min(10000,wx)) ; wy=Max(0,Min(10000,wy)) ' Limit the world woordinates to stay within 0-10000 (change this to what you like) ' Create a simple back and forth enemy-pattern to have something to look at xsprite= xsprite + xd If xsprite > 2900 Then xd = - xd If xsprite < 700 Then xd=-xd ' Put enemies and objects into the world using this sx sy style of coordinates Local sx:=xsprite-wx Local sy:=ysprite-wy canvas.DrawRect(sx,sy,size,size,image,2 Shl 3, 2 Shl 3,8,8) canvas.Flush() End Method End Function Main() New AppInstance New Myapp App.Run()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Namespace Myapp #Import "<std>" #Import "<mojo>" #Import "assets/" Using std.. Using mojo.. ' This example assumes you have a 128x128 image ready with lots of 8x8 tiles in it, or it could be anything you'll still see the effect. Const w:=2732.0/2.0, h:=2048.0/2.0 ' Display resolution Class Myapp Extends Window Field canvas:Canvas Field image:Image Field s:Int, wx:Int, wy:Int Field tilemap:Int[] = New Int[512*512] ' Create a world made of 512 x 512 tiles Field size:Int=32 ' Tilesize, change to anything you'd like Field xsprite:Int = 2000, ysprite:Int = 256, xd:Int = -4 ' An example of an enemy Method New( title:String="Myapp",width:Int=w,height:Int=h,flags:WindowFlags=WindowFlags.Resizable) Super.New("Myapp",w,h,flags) ' Create a random example world of tiles For Local y:=0 To 511 For Local x:=0 To 511 tilemap[x + y * 512] = Int(Rnd(127)) Next Next image=Image.Load("asset::128x1282.png", Null,Null) End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Clear(Color.Black) Local scrx:=wx Mod size Local scry:=wy Mod size Local mapx:=wx / size Local mapy:=wy / size Local cnty:= -scry For Local y:=mapy To (mapy+(h/size)+1) Local cntx:=-scrx For Local x:=mapx To (mapx+(w/size)+1) Local char:= tilemap[x + y * 128] Local tilex:= char & 7 Local tiley:= char Shr 3 canvas.DrawRect(cntx,cnty,size,size,image,tilex Shl 3,tiley Shl 3,8,8) ' Hardcoded to get its sprites from a 128x128px tilesheet made up of 8x8px tiles (Shl 3 = * 8) cntx=cntx+size Next cnty=cnty+size Next ' Do something like checking for exit and create some movement.If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() ' Put a slow automatic scrolling to the right of the world wx=wx+1 ' Add manual scrolling using cursor keys Local s:=4 ' Manual scrollspeed wx = wx - s * Int(Keyboard.KeyDown(Key.Left)) + s * Int(Keyboard.KeyDown(Key.Right)) wy = wy - s * Int(Keyboard.KeyDown(Key.Up)) + s * Int(Keyboard.KeyDown(Key.Down)) wx=Max(0,Min(10000,wx)) ; wy=Max(0,Min(10000,wy)) ' Limit the world woordinates to stay within 0-10000 (change this to what you like) ' Create a simple back and forth enemy-pattern to have something to look at xsprite= xsprite + xd If xsprite > 2900 Then xd = - xd If xsprite < 700 Then xd=-xd ' Put enemies and objects into the world using this sx sy style of coordinates Local sx:=xsprite-wx Local sy:=ysprite-wy canvas.DrawRect(sx,sy,size,size,image,2 Shl 3, 2 Shl 3,8,8) canvas.Flush() End Method End Function Main() New AppInstance New Myapp App.Run()

[GwenelParticipant]

You can do extremely big worlds using this no problem. It is about 90 LOC and easy to understand.

[c0d3r9Participant]

Your upload is 0kb.The file is empty

I take a look at the codebox later and delete the comments.
To hot here to read this atm.
Thanks

[GwenelParticipant]

Here it is in proper print because you cant read that mess.

Attachments:

1. scroll.zip

[c0d3r9Participant]

Take a short look into it.
You draw the visible area of the tilemap.Thats the way i know.
I thought there is a way to draw all and then to scroll with the camera across the complete area.

[GwenelParticipant]

Clipping via hardware is effective but you are still limited to some kind of size probably 4k or so and you might need to stitch several ones to get the size you want.

It becomes the same tiling technique but at a ridiculues scale and you still need to handle world coordinates the same way.

[c0d3r9Participant]

Okay i would use the “draw-only-the-visible-tiles” way that i have.
It´s not bad and the speed is every time the same because its even the same tilescount wich are visible.

[Author]

Posts