SetRenderToImage - Confused - GameCreators Forum

Author

Message

BitManip

10

Years of Service

User Offline

Joined: 20th Dec 2013

Location: Essex

Posted: 12th Jan 2020 13:34

Link

Hi All and thanks in advance!

For the first time today I am using RenderToImage. I am a little confused as to how to use this:

+ Code Snippet

	tmpImg = CreateRenderImage(tmpGrid.iDispPixelSize,tmpGrid.iDispPixelSize,0,0)
	SetRenderToImage(tmpImg, 0)
	ClearScreen()
	DrawBox(0.0, 0.0, 950, 720, makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),0)
	DrawBox(30.0, 20.0, 940, 710, makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),0)
	SetRenderToScreen()
	tmpGrid.iCursorImg = CopyImage(tmpImg, 0,0, 20,20)
	DeleteImage(tmpImg)
	SetImageTransparentColor(tmpGrid.iCursorImg,0,0,0)
	tmpGrid.iCursorSpr = CreateSprite(tmpGrid.iCursorImg)
	SetSpriteSize(tmpGrid.iCursorSpr, tmpGrid.iDispPixelSize, tmpGrid.iDispPixelSize)
	SetSpritePosition(tmpGrid.iCursorSpr, tmpGrid.ixPos, tmpGrid.iyPos)

This 'works' in the fact that I end up with a sprite of the right size with a box as the image. However my question is as follows:

The size of the image and sprite is 20x20. Yet the drawbox commands require me to draw HUGE boxes which seem way out of size of the image>

Am I doing something wrong? In my mind if the image is 20x20 then the box should be 0,0,19,19?

I control all the juicy in here!

Back to top

Profile PM

janbo

15

Years of Service

User Offline

Joined: 10th Nov 2008

Location: Germany

Posted: 12th Jan 2020 13:43 Edited at: 12th Jan 2020 13:44

Link

It's cause the whole screen is your canvas.
So to create a box that is right at the borders of your image you'll need to create a box as large as your screen resolution.
You can think of it as the 20x20 pixels are streched over the whole screen.

Back to top

Profile PM Email Website

BitManip

10

Years of Service

User Offline

Joined: 20th Dec 2013

Location: Essex

Posted: 12th Jan 2020 13:56

Link

janbo, thanks for that.

However, in my logic that means that if my screen is set to 1024,768

If I draw a box 0,0,1023,767 this *should* make a box on the sprite. But this cuts the right and bottom lines of the box off?

I control all the juicy in here!

Back to top

Profile PM

Scraggle

Moderator

20

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 12th Jan 2020 14:06

Link

That's called Aliasing

Animation Station - WIP
Code Breaker
Super Brick Smash
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

BitManip

10

Years of Service

User Offline

Joined: 20th Dec 2013

Location: Essex

Posted: 12th Jan 2020 14:23

Link

Scraggle, thanks but doesnt help me

I control all the juicy in here!

Back to top

Profile PM

Scraggle

Moderator

20

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 12th Jan 2020 14:35 Edited at: 12th Jan 2020 14:42

Link

You're trying to render a one pixel line into an area approximately 250 times smaller. There aren't enough pixels in the render target to display it. After the scaling it is considered (by the GPU) to be unworthy of display.

The reason the top lines are visible is because after scaling they align perfectly with the target renders coordinates (0 still equals 0)

To explain further with easier maths: if your display was 1000x1000 and the render image was 100x100 you would only see the line if drawn every 100 pixels. If drawn at 50, 50 for example then on the render target it would be exactly half a pixel high. Depending on your GPU that would either be drawn at 50% opacity or ignored completely

Animation Station - WIP
Code Breaker
Super Brick Smash
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

BitManip

10

Years of Service

User Offline

Joined: 20th Dec 2013

Location: Essex

Posted: 12th Jan 2020 15:03

Link

Scraggle, Thanks, I get that now however, seems to have no impact on the last lines even if I exaggerate the line thickness...still loses the right and bottom lines

tmpImg = CreateRenderImage(GetVirtualWidth(), GetVirtualHeight(), 0, 0)
	SetRenderToImage(tmpImg, 0)
	ClearScreen()
	DrawBox(0.0, 0.0, GetVirtualWidth(), GetVirtualHeight(), makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),1)
	DrawBox(5.0, 5.0, GetVirtualWidth()-5.0, GetVirtualHeight()-5.0, makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),1)
	//DrawBox(0.0, 0.0, 950, 720, makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),0)
	//DrawBox(30.0, 20.0, 940, 710, makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),0)
	SetRenderToScreen()
	tmpGrid.iCursorImg = CopyImage(tmpImg, 0,0, 20,20)
	DeleteImage(tmpImg)
	SetImageTransparentColor(tmpGrid.iCursorImg,0,0,0)
	tmpGrid.iCursorSpr = CreateSprite(tmpGrid.iCursorImg)
	SetSpriteSize(tmpGrid.iCursorSpr, tmpGrid.iDispPixelSize, tmpGrid.iDispPixelSize)
	SetSpritePosition(tmpGrid.iCursorSpr, tmpGrid.ixPos, tmpGrid.iyPos)

+ Code Snippet

	tmpImg = CreateRenderImage(GetVirtualWidth(), GetVirtualHeight(), 0, 0)
	SetRenderToImage(tmpImg, 0)
	ClearScreen()
	DrawBox(0.0, 0.0, GetVirtualWidth(), GetVirtualHeight(), makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),1)
	DrawBox(5.0, 5.0, GetVirtualWidth()-5.0, GetVirtualHeight()-5.0, makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),1)
	//DrawBox(0.0, 0.0, 950, 720, makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),0)
	//DrawBox(30.0, 20.0, 940, 710, makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),0)
	SetRenderToScreen()
	tmpGrid.iCursorImg = CopyImage(tmpImg, 0,0, 20,20)
	DeleteImage(tmpImg)
	SetImageTransparentColor(tmpGrid.iCursorImg,0,0,0)
	tmpGrid.iCursorSpr = CreateSprite(tmpGrid.iCursorImg)
	SetSpriteSize(tmpGrid.iCursorSpr, tmpGrid.iDispPixelSize, tmpGrid.iDispPixelSize)
	SetSpritePosition(tmpGrid.iCursorSpr, tmpGrid.ixPos, tmpGrid.iyPos)

Here the lines are 5 'pixels' wide which are shown as very thick lines for the top and left but are missing for the bottom and right? See image attached.

It seems to be cropping somwehow?

I control all the juicy in here!

Attachments

Login to view attachments

Back to top

Profile PM

Scraggle

Moderator

20

Years of Service

User Offline

Joined: 10th Jul 2003

Location: Yorkshire

Posted: 12th Jan 2020 16:14

Link

I can't help you with that small section of code.
At the very least I'd need to know what size resolution you are using.

I just tried that code with the obvious extra code I needed to make it run and it performed as expected.

Animation Station - WIP
Code Breaker
Super Brick Smash
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

BitManip

10

Years of Service

User Offline

Joined: 20th Dec 2013

Location: Essex

Posted: 12th Jan 2020 17:25 Edited at: 12th Jan 2020 17:26

Link

Okay, so I did the same in creating a small project using that code:

// Project: RenderToImg 
// Created: 20-01-12

// show all errors

SetErrorMode(2)

// set window properties
SetWindowTitle( "RenderToImg" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // 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 )
SetClearColor(100,100,100)

Plop = CreateSprite(0)
SetSpriteSize(Plop, 128,128)
SetSpriteColor(Plop, 255,0,100,255)
SetSpritePosition(Plop, 132, 132)

tmpImg = CreateRenderImage(GetVirtualWidth(), GetVirtualHeight(), 0, 0)
SetRenderToImage(tmpImg, 0)
ClearScreen()
DrawBox(0.0, 0.0, GetVirtualWidth(), GetVirtualHeight(), makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),1)
DrawBox(50, 50, GetVirtualWidth()-50, GetVirtualHeight()-50, makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),1)

SetRenderToScreen()
ImgA = CopyImage(tmpImg, 0,0, GetImageWidth(tmpImg),GetImageHeight(tmpImg))
DeleteImage(tmpImg)
SetImageTransparentColor(ImgA,0,0,0)
SprA = CreateSprite(ImgA)
SetSpriteSize(SprA, 64,64)
SetSpritePosition(SprA, 100,100)

do
    Print( ScreenFPS() )
    Sync()
loop

+ Code Snippet

// Project: RenderToImg 
// Created: 20-01-12

// show all errors

SetErrorMode(2)

// set window properties
SetWindowTitle( "RenderToImg" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // 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 )
SetClearColor(100,100,100)

Plop = CreateSprite(0)
SetSpriteSize(Plop, 128,128)
SetSpriteColor(Plop, 255,0,100,255)
SetSpritePosition(Plop, 132, 132)


tmpImg = CreateRenderImage(GetVirtualWidth(), GetVirtualHeight(), 0, 0)
SetRenderToImage(tmpImg, 0)
ClearScreen()
DrawBox(0.0, 0.0, GetVirtualWidth(), GetVirtualHeight(), makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),makecolor(255,255,255),1)
DrawBox(50, 50, GetVirtualWidth()-50, GetVirtualHeight()-50, makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),makecolor(0,0,0),1)


SetRenderToScreen()
ImgA = CopyImage(tmpImg, 0,0, GetImageWidth(tmpImg),GetImageHeight(tmpImg))
DeleteImage(tmpImg)
SetImageTransparentColor(ImgA,0,0,0)
SprA = CreateSprite(ImgA)
SetSpriteSize(SprA, 64,64)
SetSpritePosition(SprA, 100,100)

do
    Print( ScreenFPS() )
    Sync()
loop

and I get this