- Joined
- Jan 2, 2020
- Messages
- 1,414
I'm trying to change the Tileimage.cxs example to make it possible to do smooth superslow non-integer movements movements without all the normal supersampling stuff like downsampling an enormous image and downsample it down to the screen.
Instead you draw the graphics once to integer coordinates and then to floating coordinates, and it doesn't matter how slow you scroll.
I successfully converted Tileimage.cxs into mojo2 but I'm kinda stuck now.
Included a complete BMX code that shows the technique. The first part of the code creates two tiles of size 66x66 instead of 64x64, as you need padding for this technique.
Instead you draw the graphics once to integer coordinates and then to floating coordinates, and it doesn't matter how slow you scroll.
I successfully converted Tileimage.cxs into mojo2 but I'm kinda stuck now.
Included a complete BMX code that shows the technique. The first part of the code creates two tiles of size 66x66 instead of 64x64, as you need padding for this technique.
SetGraphicsDriver GLMax2DDriver() ; Graphics 640,480,0
Local pic:TImage[2] ; pic[0]=CreateImage(66,66,1,FILTEREDIMAGE|DYNAMICIMAGE) ; pic[1]=CreateImage(66,66,1,FILTEREDIMAGE|DYNAMICIMAGE)
Local border:Int=1, width:Int=ImageWidth(pic[0]), height:Int=ImageHeight(pic[0]), x:Int, y:Int, red:Int, green:Int, blue:Int
Local p:TPixmap=LockImage(pic[0],0,True,True)
For y=0 To 65
For x=0 To 65
red=x ; green=y ; blue=x+y
If x=0 Or x=65 Or y=0 Or y=65 Then WritePixel(p,x,y,(red Shl 16) | (green Shl 8) | blue) Else WritePixel(p,x,y,$FF000000 | (red Shl 16) | (green Shl 8) | blue)
Next
Next
UnlockImage(pic[0],0)
p=LockImage(pic[1],0,True,True)
For y=0 To 65
For x=0 To 65
red=255-y ; green=255-(x+y) ; blue=255-x
If x=0 Or x=65 Or y=0 Or y=65 Then WritePixel(p,x,y,(red Shl 16) | (green Shl 8) | blue) Else WritePixel(p,x,y,$FF000000 | (red Shl 16) | (green Shl 8) | blue)
Next
Next
UnlockImage(pic[1],0)
Local id:Int, scrollx:Float=0, scrollspeedx:Float=0.05, scrolly:Float=0, scrollspeedy:Float=0.05
Repeat
Cls
' Draw To Int coords
SetBlend SOLIDBLEND
id=0
Y=-height-height+border*2
While Y<480
X=-width-width+border*2
While X<640
DrawImage pic[id],Int(scrollx+x)+2,Int(scrolly+y)+2
id=(id+1) Mod 2
X:+width-border*2
Wend
Y:+height-border*2
Wend
' Draw to float coords
SetBlend ALPHABLEND
id=0
Y=-height-height+border*2
While Y<480
X=-width-width+border*2
While X<640
DrawImage pic[id],scrollx+x,scrolly+y
id=(id+1) Mod 2
X:+width-border*2
Wend
Y:+height-border*2
Wend
scrollx:+scrollspeedx
scrolly:+scrollspeedy
If scrollx>=width*2-border*4 Then scrollx:-(width*2-border*4)
If scrolly>=height*2-border*4 Then scrolly:-(height*2-border*4)
Flip
Until KeyHit(KEY_ESCAPE) Or AppTerminate()[
Local pic:TImage[2] ; pic[0]=CreateImage(66,66,1,FILTEREDIMAGE|DYNAMICIMAGE) ; pic[1]=CreateImage(66,66,1,FILTEREDIMAGE|DYNAMICIMAGE)
Local border:Int=1, width:Int=ImageWidth(pic[0]), height:Int=ImageHeight(pic[0]), x:Int, y:Int, red:Int, green:Int, blue:Int
Local p:TPixmap=LockImage(pic[0],0,True,True)
For y=0 To 65
For x=0 To 65
red=x ; green=y ; blue=x+y
If x=0 Or x=65 Or y=0 Or y=65 Then WritePixel(p,x,y,(red Shl 16) | (green Shl 8) | blue) Else WritePixel(p,x,y,$FF000000 | (red Shl 16) | (green Shl 8) | blue)
Next
Next
UnlockImage(pic[0],0)
p=LockImage(pic[1],0,True,True)
For y=0 To 65
For x=0 To 65
red=255-y ; green=255-(x+y) ; blue=255-x
If x=0 Or x=65 Or y=0 Or y=65 Then WritePixel(p,x,y,(red Shl 16) | (green Shl 8) | blue) Else WritePixel(p,x,y,$FF000000 | (red Shl 16) | (green Shl 8) | blue)
Next
Next
UnlockImage(pic[1],0)
Local id:Int, scrollx:Float=0, scrollspeedx:Float=0.05, scrolly:Float=0, scrollspeedy:Float=0.05
Repeat
Cls
' Draw To Int coords
SetBlend SOLIDBLEND
id=0
Y=-height-height+border*2
While Y<480
X=-width-width+border*2
While X<640
DrawImage pic[id],Int(scrollx+x)+2,Int(scrolly+y)+2
id=(id+1) Mod 2
X:+width-border*2
Wend
Y:+height-border*2
Wend
' Draw to float coords
SetBlend ALPHABLEND
id=0
Y=-height-height+border*2
While Y<480
X=-width-width+border*2
While X<640
DrawImage pic[id],scrollx+x,scrolly+y
id=(id+1) Mod 2
X:+width-border*2
Wend
Y:+height-border*2
Wend
scrollx:+scrollspeedx
scrolly:+scrollspeedy
If scrollx>=width*2-border*4 Then scrollx:-(width*2-border*4)
If scrolly>=height*2-border*4 Then scrolly:-(height*2-border*4)
Flip
Until KeyHit(KEY_ESCAPE) Or AppTerminate()[
Code:
Import mojo2
Function Main()
New TileImage
End Function
Class TileImage Extends App
Field canvas:Canvas
Field img:Image
Field ix#,iy#
Field scale_width#=1.0,scale_hieght#=1.0
Method OnCreate()
SetSwapInterval 1
SetUpdateRate 0
img = Image.Load("bg.png",0,0,0)
canvas=New Canvas
canvas.SetFont Null
End Method
Method OnUpdate()
If KeyDown (KEY_LEFT)
scale_width = scale_width - 0.1
If scale_width < 1.0 Then scale_width = 1.0
Endif
If KeyDown (KEY_RIGHT)
scale_width = scale_width + 0.1
Endif
If KeyDown (KEY_DOWN)
scale_hieght = scale_hieght - 0.1
If scale_hieght < 1.0 Then scale_hieght = 1.0
Endif
If KeyDown (KEY_UP)
scale_hieght = scale_hieght + 0.1
Endif
End Method
Method OnRender()
Local ih=128,iw=128
Local scale_x#=.99, scale_y#=.99 ' Some browsers like FireFox need a .01 offset to display right
canvas.Clear
canvas.PushMatrix
canvas.Translate DeviceWidth * 0.5, DeviceHeight * 0.5
canvas.Scale scale_width,scale_hieght
canvas.Translate -DeviceWidth * 0.5, -DeviceHeight * 0.5
ix = ix + 1.5
iy = iy +1
Tile_Image(img,ix,iy,ih,iw,scale_x,scale_y)
canvas.PopMatrix
canvas.PushMatrix
canvas.Translate 0,0
canvas.Scale 1,1
canvas.SetBlendMode BlendMode.Alpha
canvas.DrawText "Use Arrow Keys to adjust scale.",10,10
canvas.PopMatrix
canvas.Flush
End Method
Method Tile_Image(img:Image,x#,y#,ih,iw,scalex#,scaley#)
Local w#=iw * scalex
Local h#=ih * scaley
Local scissor:Float[]
' scissor = canvas.GetScissor() ' GetScissor does not exist in mojo2
scissor[0] = 0
scissor[1] = 0
scissor[2] = 1440
scissor[3] = 900
Local viewport_x = scissor[0]
Local viewport_y = scissor[1]
Local viewport_w = scissor[2]
Local viewport_h = scissor[3]
Local ox#=viewport_x-w+1
Local oy#=viewport_y-h+1
Local px#=x
Local py#=y
Local fx#=px-Floor(px)
Local fy#=py-Floor(py)
Local tx#=Floor(px)-ox
Local ty#=Floor(py)-oy
If tx>=0 tx=tx Mod w + ox Else tx = w - -tx Mod w + ox
If ty>=0 ty=ty Mod h + oy Else ty = h - -ty Mod h + oy
Local vr#= viewport_x + viewport_w, vb# = viewport_y + viewport_h
Local iy#=ty
While iy<(vb + h)
Local ix#=tx
While ix<(vr + w)
canvas.DrawImage img,ix+fx,iy+fy
ix=ix+w
Wend
iy=iy+h
Wend
End Method
End Class