Draw Text On A Sprite And Make A New Sprite With Image+Text?

Author

Message

JeZxLee

7

Years of Service

User Offline

Joined: 15th Mar 2017

Location: Long Island, New York, United States, Earth

Posted: 29th Dec 2017 15:44

Link

Hi,

Started work on a new Android / HTML5 word game.
Would it be possible to draw text on a sprite and make a new sprite with image+text?
Let us know, thanks!

JeZxLee
16BitSoft
Video Game Design Studio
http://www.16BitSoft.com
Open-Source AppGameKit Project!

Back to top

Profile PM Email Website

Bengismo

7

Years of Service

User Offline

Joined: 20th Nov 2017

Location: Yorkshire, England

Posted: 29th Dec 2017 20:54 Edited at: 29th Dec 2017 20:55

Link

Take a look at
https://www.appgamekit.com/documentation/Reference/Image/CreateRenderImage.htm
https://www.appgamekit.com/documentation/Reference/Core/SetRenderToImage.htm

You can render the text and a sprite to a render image.....then you use the render image on a new sprite which has the sprite plus the text on it. This works on windows fine but not sure if you might have problems on html5.

Back to top

Profile PM

JeZxLee

7

Years of Service

User Offline

Joined: 15th Mar 2017

Location: Long Island, New York, United States, Earth

Posted: 30th Dec 2017 01:44

Link

Thank you, we will try that!

JeZxLee
16BitSoft
Video Game Design Studio
http://www.16BitSoft.com
Open-Source AppGameKit Project!

Back to top

Profile PM Email Website

JeZxLee

7

Years of Service

User Offline

Joined: 15th Mar 2017

Location: Long Island, New York, United States, Earth

Posted: 30th Dec 2017 05:01 Edited at: 30th Dec 2017 05:34

Link

Hi,

I've been fighting this for hours, I can't seem to get it working.
Below is the source code, any ideas?

function PreRenderButtonsWithTexts()
	index as integer = 10000
	text as string = " "
	font as integer = 999
	size as integer = 25
	red as integer = 0
	green as integer = 0
	blue as integer = 0
	alpha as integer = 0
	outRed as integer = 232
	outGreen as integer = 166
	outBlue as integer = 0
	horizontalJustification as integer = 1
	screenX as integer
	screenX = (251 / 2)
	screenY as integer
	screenY = (38 / 2)

buttonTextIndex as integer
	for buttonTextIndex = 0 to 7
		CreateRenderImage( 666, 251, 38, 0, 0 )
		SetRenderToImage( 666, 0 )
		
		ButtonSprite = CreateSprite ( 103 )
		SetSpriteDepth ( ButtonSprite, 2 )
		SetSpriteOffset( ButtonSprite, (GetSpriteWidth(ButtonSprite)/2) , (GetSpriteHeight(ButtonSprite)/2) ) 
		SetSpritePositionByOffset( ButtonSprite, screenX, screenY )

text = ButtonText[buttonTextIndex]

outlineIndex as integer = 1
		posX as integer
		posY as integer
		for posX = -2 to 2 step 1
			for posY = -2 to 2 step 1
				if GetTextExists(index+outlineIndex) = 0 then CreateText( index+outlineIndex, text )
				SetTextFont( index+outlineIndex, font ) 
				SetTextSize(index+outlineIndex, size)
				SetTextDepth(index+outlineIndex, 1)

if posX = -2 and posY = -2 and buttonTextIndex = 0
					dec screenY, ( GetTextTotalHeight(index+outlineIndex)/2 )
				endif

SetTextColor(index+outlineIndex, outRed, outGreen, outBlue, alpha)
				SetTextAlignment(index+outlineIndex, horizontalJustification)
				SetTextPosition(index+outlineIndex, screenX+posX, screenY+posY)
				if GetTextExists(index+outlineIndex) then SetTextVisible( index+outlineIndex, 1 )
				inc outlineIndex, 1
			next posY
		next posX

if GetTextExists(index) = 0 then CreateText( index, text )
		SetTextFont( index, font ) 
		SetTextSize(index, size)
		SetTextDepth(index, 1)
		SetTextColor(index, red, green, blue, alpha)
		SetTextAlignment(index, horizontalJustification)
		SetTextPosition(index, screenX, screenY)
		if GetTextExists(index) then SetTextVisible( index, 1 )
		
		inc index, 26

SetRenderToScreen()
		
		ButtonWithText[buttonTextIndex] = CreateSprite( 666 )
		SetSpriteOffset( ButtonWithText[buttonTextIndex], (GetSpriteWidth(ButtonSprite)/2) , (GetSpriteHeight(ButtonSprite)/2) ) 
		SetSpritePositionByOffset( ButtonWithText[buttonTextIndex], -9999, -9999 )
		SetSpriteColorAlpha( ButtonWithText[buttonTextIndex], 255 )
		SetSpriteScaleByOffset( ButtonWithText[buttonTextIndex], 1, 1 )
		SetSpriteDepth( ButtonWithText[buttonTextIndex], 2 )
		
		DeleteImage( 666 )
	next buttonTextIndex
endfunction

+ Code Snippet

function PreRenderButtonsWithTexts()
	index as integer = 10000
	text as string = " "
	font as integer = 999
	size as integer = 25
	red as integer = 0
	green as integer = 0
	blue as integer = 0
	alpha as integer = 0
	outRed as integer = 232
	outGreen as integer = 166
	outBlue as integer = 0
	horizontalJustification as integer = 1
	screenX as integer
	screenX = (251 / 2)
	screenY as integer
	screenY = (38 / 2)

	buttonTextIndex as integer
	for buttonTextIndex = 0 to 7
		CreateRenderImage( 666, 251, 38, 0, 0 )
		SetRenderToImage( 666, 0 )
		
		ButtonSprite = CreateSprite ( 103 )
		SetSpriteDepth ( ButtonSprite, 2 )
		SetSpriteOffset( ButtonSprite, (GetSpriteWidth(ButtonSprite)/2) , (GetSpriteHeight(ButtonSprite)/2) ) 
		SetSpritePositionByOffset( ButtonSprite, screenX, screenY )

		text = ButtonText[buttonTextIndex]

		outlineIndex as integer = 1
		posX as integer
		posY as integer
		for posX = -2 to 2 step 1
			for posY = -2 to 2 step 1
				if GetTextExists(index+outlineIndex) = 0 then CreateText( index+outlineIndex, text )
				SetTextFont( index+outlineIndex, font ) 
				SetTextSize(index+outlineIndex, size)
				SetTextDepth(index+outlineIndex, 1)

				if posX = -2 and posY = -2 and buttonTextIndex = 0
					dec screenY, ( GetTextTotalHeight(index+outlineIndex)/2 )
				endif

				SetTextColor(index+outlineIndex, outRed, outGreen, outBlue, alpha)
				SetTextAlignment(index+outlineIndex, horizontalJustification)
				SetTextPosition(index+outlineIndex, screenX+posX, screenY+posY)
				if GetTextExists(index+outlineIndex) then SetTextVisible( index+outlineIndex, 1 )
				inc outlineIndex, 1
			next posY
		next posX

		if GetTextExists(index) = 0 then CreateText( index, text )
		SetTextFont( index, font ) 
		SetTextSize(index, size)
		SetTextDepth(index, 1)
		SetTextColor(index, red, green, blue, alpha)
		SetTextAlignment(index, horizontalJustification)
		SetTextPosition(index, screenX, screenY)
		if GetTextExists(index) then SetTextVisible( index, 1 )
		
		inc index, 26

		SetRenderToScreen()
		
		ButtonWithText[buttonTextIndex] = CreateSprite( 666 )
		SetSpriteOffset( ButtonWithText[buttonTextIndex], (GetSpriteWidth(ButtonSprite)/2) , (GetSpriteHeight(ButtonSprite)/2) ) 
		SetSpritePositionByOffset( ButtonWithText[buttonTextIndex], -9999, -9999 )
		SetSpriteColorAlpha( ButtonWithText[buttonTextIndex], 255 )
		SetSpriteScaleByOffset( ButtonWithText[buttonTextIndex], 1, 1 )
		SetSpriteDepth( ButtonWithText[buttonTextIndex], 2 )
		
		DeleteImage( 666 )
	next buttonTextIndex
endfunction

JeZxLee
16BitSoft
Video Game Design Studio
http://www.16BitSoft.com
Open-Source AppGameKit Project!

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Bengismo

7

Years of Service

User Offline

Joined: 20th Nov 2017

Location: Yorkshire, England

Posted: 30th Dec 2017 10:22

Link

You need to call Render() so that your sprite and text are rendered to the RenderImage. Then you can use the render image on a sprite.

Your also deleting the image within the same function before using it. Unless you want to update the renderimage reguarly, you dont need to delete and rerender it. I can post a simple example if wanted.

Back to top

Profile PM

JeZxLee

7

Years of Service

User Offline

Joined: 15th Mar 2017

Location: Long Island, New York, United States, Earth

Posted: 30th Dec 2017 12:50

Link

Hi,

Have below code and still get white buttons with no text?:

CreateRenderImage( 666, 251, 38, 0, 0 )
		SetRenderToImage( 666, 0 )
		
		ButtonSprite[0] = CreateSprite ( 103 )
		SetSpriteTransparency( ButtonSprite[0], 1 )
		SetSpriteDepth ( ButtonSprite[0], 0 )
		SetSpriteOffset( ButtonSprite[0], (GetSpriteWidth(ButtonSprite[0])/2) , (GetSpriteHeight(ButtonSprite[0])/2) ) 
		SetSpritePositionByOffset( ButtonSprite[0], screenX, screenY )

text = ButtonText[buttonTextIndex]

outlineIndex as integer = 1
		posX as integer
		posY as integer
		for posX = -2 to 2 step 1
			for posY = -2 to 2 step 1
				if GetTextExists(index+outlineIndex) = 0 then CreateText( index+outlineIndex, text )
				SetTextFont( index+outlineIndex, font ) 
				SetTextSize(index+outlineIndex, size)
				SetTextDepth(index+outlineIndex, 0)

if posX = -2 and posY = -2 and buttonTextIndex = 0
					dec screenY, ( GetTextTotalHeight(index+outlineIndex)/2 )
				endif

SetTextColor(index+outlineIndex, outRed, outGreen, outBlue, alpha)
				SetTextAlignment(index+outlineIndex, horizontalJustification)
				SetTextPosition(index+outlineIndex, screenX+posX, screenY+posY)
				if GetTextExists(index+outlineIndex) then SetTextVisible( index+outlineIndex, 1 )
				inc outlineIndex, 1
			next posY
		next posX

if GetTextExists(index) = 0 then CreateText( index, text )
		SetTextFont( index, font ) 
		SetTextSize(index, size)
		SetTextDepth(index, 0)
		SetTextColor(index, red, green, blue, alpha)
		SetTextAlignment(index, horizontalJustification)
		SetTextPosition(index, screenX, screenY)
		if GetTextExists(index) then SetTextVisible( index, 1 )
		
		inc index, 26

Render()
		
		ButtonWithText[buttonTextIndex] = CreateSprite( 666 )
		SetSpriteTransparency( ButtonWithText[buttonTextIndex], 1 )
		SetSpriteOffset( ButtonWithText[buttonTextIndex], (GetSpriteWidth(ButtonSprite[0])/2) , (GetSpriteHeight(ButtonSprite[0])/2) ) 
		SetSpritePositionByOffset( ButtonWithText[buttonTextIndex], -9999, -9999 )
		SetSpriteColorAlpha( ButtonWithText[buttonTextIndex], 255 )
		SetSpriteScaleByOffset( ButtonWithText[buttonTextIndex], 1, 1 )
		SetSpriteDepth( ButtonWithText[buttonTextIndex], 0 )
				
		DeleteImage( 666 )
		DeleteSprite( ButtonSprite[0] )

SetRenderToScreen()
	
	next buttonTextIndex
endfunction

+ Code Snippet

	CreateRenderImage( 666, 251, 38, 0, 0 )
		SetRenderToImage( 666, 0 )
		
		ButtonSprite[0] = CreateSprite ( 103 )
		SetSpriteTransparency( ButtonSprite[0], 1 )
		SetSpriteDepth ( ButtonSprite[0], 0 )
		SetSpriteOffset( ButtonSprite[0], (GetSpriteWidth(ButtonSprite[0])/2) , (GetSpriteHeight(ButtonSprite[0])/2) ) 
		SetSpritePositionByOffset( ButtonSprite[0], screenX, screenY )

		text = ButtonText[buttonTextIndex]

		outlineIndex as integer = 1
		posX as integer
		posY as integer
		for posX = -2 to 2 step 1
			for posY = -2 to 2 step 1
				if GetTextExists(index+outlineIndex) = 0 then CreateText( index+outlineIndex, text )
				SetTextFont( index+outlineIndex, font ) 
				SetTextSize(index+outlineIndex, size)
				SetTextDepth(index+outlineIndex, 0)

				if posX = -2 and posY = -2 and buttonTextIndex = 0
					dec screenY, ( GetTextTotalHeight(index+outlineIndex)/2 )
				endif

				SetTextColor(index+outlineIndex, outRed, outGreen, outBlue, alpha)
				SetTextAlignment(index+outlineIndex, horizontalJustification)
				SetTextPosition(index+outlineIndex, screenX+posX, screenY+posY)
				if GetTextExists(index+outlineIndex) then SetTextVisible( index+outlineIndex, 1 )
				inc outlineIndex, 1
			next posY
		next posX

		if GetTextExists(index) = 0 then CreateText( index, text )
		SetTextFont( index, font ) 
		SetTextSize(index, size)
		SetTextDepth(index, 0)
		SetTextColor(index, red, green, blue, alpha)
		SetTextAlignment(index, horizontalJustification)
		SetTextPosition(index, screenX, screenY)
		if GetTextExists(index) then SetTextVisible( index, 1 )
		
		inc index, 26

		Render()
		
		ButtonWithText[buttonTextIndex] = CreateSprite( 666 )
		SetSpriteTransparency( ButtonWithText[buttonTextIndex], 1 )
		SetSpriteOffset( ButtonWithText[buttonTextIndex], (GetSpriteWidth(ButtonSprite[0])/2) , (GetSpriteHeight(ButtonSprite[0])/2) ) 
		SetSpritePositionByOffset( ButtonWithText[buttonTextIndex], -9999, -9999 )
		SetSpriteColorAlpha( ButtonWithText[buttonTextIndex], 255 )
		SetSpriteScaleByOffset( ButtonWithText[buttonTextIndex], 1, 1 )
		SetSpriteDepth( ButtonWithText[buttonTextIndex], 0 )
				
		DeleteImage( 666 )
		DeleteSprite( ButtonSprite[0] )

		SetRenderToScreen()
	
	next buttonTextIndex
endfunction

Any ideas?
I am on Linux, maybe it only works on Windows(R) ?

JeZxLee
16BitSoft
Video Game Design Studio
http://www.16BitSoft.com
Open-Source AppGameKit Project!

Back to top

Profile PM Email Website

Bengismo

7

Years of Service

User Offline

Joined: 20th Nov 2017

Location: Yorkshire, England

Posted: 30th Dec 2017 14:41

Link

Heres an example that works fine on windows (You will need an image for the background called Test.png)

// Simple project to render a sprite and some basic text to a render image

// set window properties
SetWindowTitle( "TestScreen" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

// Create render image  (256x256)
CreateRenderImage (1,256,256,0,0)

// First we make the render image by drawing a sprite and some text onto the image
// set following drawcommands to the renderimage 1
SetRenderToImage (1,0)

// load the image for the background of the sprite
LoadImage(2,"Test.png")
// create a sprite from the image above
CreateSprite(2,2)

// draw some text
CreateText(1,"TEXT")
SetTextSize(1,70)
SetTextColor(1,255,255,255,255)
SetTextPosition(1,128,128)

// Render to force the sprite and text to be drawn to the render image
Render()
// Now the render image (Id:1) will have the text and sprite on it

// delete the sprite and the text as we dont need them anymore (bye!)
DeleteSprite(2)
DeleteText(1)

//set all the following drawcommands to draw to the screen
setrendertoscreen ()

//create sprite ID 3 with the render image as its graphics
createsprite(3,1)

x=100

do
	// Move the sprite with thrender image accross the screen
	x = x+1
	if x>500
		x = 100
	endif
	
	SetSpritePosition(3,x,200)
	SetSpriteAngle(3,x/2)

Sync()
	
loop

+ Code Snippet

// Simple project to render a sprite and some basic text to a render image

// set window properties
SetWindowTitle( "TestScreen" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )


// Create render image  (256x256)
CreateRenderImage (1,256,256,0,0) 

// First we make the render image by drawing a sprite and some text onto the image
// set following drawcommands to the renderimage 1
SetRenderToImage (1,0) 

// load the image for the background of the sprite
LoadImage(2,"Test.png")
// create a sprite from the image above
CreateSprite(2,2)

// draw some text
CreateText(1,"TEXT")
SetTextSize(1,70)
SetTextColor(1,255,255,255,255)
SetTextPosition(1,128,128)

// Render to force the sprite and text to be drawn to the render image
Render()
// Now the render image (Id:1) will have the text and sprite on it

// delete the sprite and the text as we dont need them anymore (bye!)
DeleteSprite(2)
DeleteText(1)

//set all the following drawcommands to draw to the screen
setrendertoscreen () 

//create sprite ID 3 with the render image as its graphics
createsprite(3,1) 

x=100

do
	// Move the sprite with thrender image accross the screen
	x = x+1
	if x>500
		x = 100
	endif
	
	SetSpritePosition(3,x,200)
	SetSpriteAngle(3,x/2)

	Sync()
	
loop

This creates text on top of the Test.png and then uses the rendered image on a sprite which moves accross the screen.

Try to get something nice and simple working first - like the above then add it to the full game

Back to top

Profile PM

JeZxLee

7

Years of Service

User Offline

Joined: 15th Mar 2017

Location: Long Island, New York, United States, Earth

Posted: 30th Dec 2017 18:22 Edited at: 30th Dec 2017 18:23

Link

Hi,

I tried your code it does the Test.png(with transparency) fine,
but after two hours of fiddling I still can't get any text to display?

About to give up, but I really need this feature for optimization of game.
Any ideas... I am on Linux - perhaps it won't work on Linux?

+ Code Snippet

CreateRenderImage (2,256,256,0,0) 
SetRenderToImage (2,0) 
 
LoadImage(4,"\media\images\Test.png")
CreateSprite(4,4)
SetSpriteDepth(4, 10)

// Below is not drawing text?
CreateText(91,"TEXT")
SetTextFont(91,999)
SetTextSize(91,15)
SetTextColor(91,0,0,0,255)
SetTextDepth(91, 0)
SetTextPosition(91,128,128)
// Above is not drawing text?

Render()

DeleteSprite(4)
DeleteText(91)
 
setrendertoscreen () 
 
createsprite(4,4)
SetSpriteDepth(4, 0)
SetSpritePosition(4, 0, 0)

JeZxLee
16BitSoft
Video Game Design Studio
http://www.16BitSoft.com
Open-Source AppGameKit Project!

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Bengismo

7

Years of Service

User Offline

Joined: 20th Nov 2017

Location: Yorkshire, England

Posted: 30th Dec 2017 19:04

Link

I've tried my code above on Windows and Android and it works fine on both. (Test.png is a green arrow)

In your version you have assigned a font (ID 999) but I dont see that you have created or loaded one?
Also, make sure you text is LARGE enough to see...make it really big as 15 high text on a 1080p virtual resolution will mean its just 4 pixels high on a 256x256 pixel render image
Also make sure it is not black text being printed onto a black background or it will not be seen.

Work on just printing nothing but text to the render image first if you have to.

If it definately wont work on linux then it can be reported as a linux specific bug

Back to top

Profile PM

JeZxLee

7

Years of Service

User Offline

Joined: 15th Mar 2017

Location: Long Island, New York, United States, Earth

Posted: 30th Dec 2017 19:14

Link

Ok, I got it now...
Many thanks!
Have a prosperous New Year!

JeZxLee
16BitSoft
Video Game Design Studio
http://www.16BitSoft.com
Open-Source AppGameKit Project!

Back to top

Profile PM Email Website

JeZxLee

7

Years of Service

User Offline

Joined: 15th Mar 2017

Location: Long Island, New York, United States, Earth

Posted: 30th Dec 2017 21:19

Link

Thought I had it, everything works but the transparency of the image is not preserved?
I'll put this aside for now, and continue with something else...

JeZxLee
16BitSoft
Video Game Design Studio
http://www.16BitSoft.com
Open-Source AppGameKit Project!

Back to top

Profile PM Email Website

blink0k

Moderator

11

Years of Service

User Offline

Joined: 22nd Feb 2013

Location: the land of oz

Posted: 30th Dec 2017 21:30 Edited at: 30th Dec 2017 21:32

Link

try SetSpriteTransparency( iSpriteIndex, mode )
make sure there is nothing behind your sprite as well. what i do is;
setrendertoimage()
clearscreen()
drawsprite()
setrendertoscreen()

Back to top

Profile PM

Sorry your browser is not supported!

Newcomers AppGameKit Corner / Draw Text On A Sprite And Make A New Sprite With Image+Text?

Attachments

Attachments