Text to Sprite for better "Buttons"

Author

Message

JasonPC

9

Years of Service

User Offline

Joined: 14th Apr 2015

Location: United Kingdom

Posted: 30th Apr 2015 13:44

Link

Hi there,
I've been looking at the Button features of AppGameKit and realise I want a bit more flexibility (gradients/texture and possibly multi-line).
My idea is to render the text to a spite and use the built-in collision detection to simplify the code.

I've got the text into a sprite, but I'm having problems adding a background to the text.

The attached screenshot shows what I'm currently getting from the code below.

+ Code Snippet

SetWindowTitle( "Test Text" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

textRed=0
textGreen=100
textBlue=255
textAlpha=255

idRender=CreateRenderImage (1024,768,0,1)		// Temp image for text render

bg_color=MakeColor (255,255,0)

SetRenderToImage(idRender,0)
DrawBox( 1, 1, 100, 100, bg_color, bg_color, 0, 0, 1 )

idText=CreateText ( "Jasons" )
SetTextSize(idText,80)
SetTextColor(idText,textRed,textGreen,textBlue,textAlpha)

Render2DFront( )		
widthText=GetTextTotalWidth(idText)
heightText=GetTextTotalHeight(idText)
idTextRender=CopyImage( idRender, 0, 0, widthText, heightText )

mySprite=createsprite(idTextRender) 
setrendertoscreen ()

Render2DFront( )
DeleteImage(idRender)
DeleteText(idText)	

do
    Sync()
loop

[img]null[/img]

Back to top

Profile PM Email Website

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 1st May 2015 00:38

Link

If you want really nice buttons use images and change the image depending on the button state. That way you will have much crisper, more professional looking gfx.

Using AppGameKit V2 Tier 1

Back to top

Profile PM Email

JasonPC

9

Years of Service

User Offline

Joined: 14th Apr 2015

Location: United Kingdom

Posted: 1st May 2015 23:12

Link

Yeah, an image is easy to code (but then needs time to create outside of AGK), but I'm really looking for some basic Widgets - the current "button" code is not that flexible.

I'm happy to code a function to pre-render images (sprites), using a font pack and options for background texture/gradient/solid would work very well.
This is for apps, not in-game.

But, it looks like my screenshot didn't come through.
I've got the text "JASONS", and there should be a yellow>black gradient box UNDER the text. However, it's over the text (so obscuring "JA")

Do I need to create an image from the text, it looks like I need to look at the rendering pipeline.
The text and the colour (combined) do appear on the created sprite, but it looks like the Depth/Z order is not as expected and the text is below the Box (even if it is created after)

Back to top

Profile PM Email Website

IronManhood

9

Years of Service

User Offline

Joined: 6th Feb 2015

Location: US

Posted: 2nd May 2015 14:41 Edited at: 2nd May 2015 14:45

Link

Oh, any of the draw commands are drawn above everything except the print function. It's all in the description.

http://www.appgamekit.com/documentation/Reference/Core/DrawBox.htm

Also, I made these functions to serve as a quick testing of menus and stuff.

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

// set display properties
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

// globals section
global gradient_image as integer
global random_variable as integer
global random_variable2 as integer

// create the gradient image
gradient_image = gradient( Random(100,225), Random(100,225), Random(100,225), Random(100,225), Random(100,225), Random(100,225), 2)

// call button function early to create it so you can set the image to the gradient
button(1, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 100, 0, 0, 30, 1, "Button 1" )
setButtonImage( 1, gradient_image )

button(2, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 300, 0, 0, 30, 0, "Button 2" )
setButtonImage( 2, gradient_image )

do
	// calling the button function while in the do loop will create it also.
	// the button function serves two purposes, to create it and to check if you pressed the button with the pointer functions
	if button(1, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 100, 0, 0, 30, 1, "Button 1" ) = 1
		// do something...
		inc random_variable
	endif
	if button(2, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 300, 0, 0, 30, 0, "Button 2" ) = 1
		// do something...
		inc random_variable2
	endif
    Print( "FPS: " + str(ScreenFPS(),0) )
    Print("random_variable: " + str(random_variable))
    Print("random_variable2: " + str(random_variable2))
    Sync()
loop
// ------------------------------------------------------------------ button functions

// button create and check
function button(index, x#, y#, xPos#, yPos#, xSize#, ySize#, textSize, hold, text$ )
	if hold = 1
		if GetPointerState() = 1
			if GetSpriteHitTest(index + 200000, x#, y#) = 1
				SetSpriteColor(index + 200000, 80, 80, 80, 255)
				exitfunction 1
			endif
			exitfunction 0
		endif
	else
		if GetPointerState() = 1
			if GetPointerPressed() = 1
				if GetSpriteHitTest(index + 200000, x#, y#) = 1
					SetSpriteColor(index + 200000, 80, 80, 80, 255)
					exitfunction 1
				endif
			else
			exitfunction 0
			endif
		endif
	endif
	if GetSpriteExists(index + 200000) = 0
		CreateSprite(index + 200000, 0)
		SetSpriteSize(index + 200000, xSize#, ySize#)
		SetSpriteOffset(index + 200000, GetSpriteWidth(index + 200000) / 2, GetSpriteHeight(index + 200000) / 2)
		SetSpritePositionByOffset(index + 200000, xPos#, yPos#)
	endif
	if GetTextExists(index + 200000) = 0
		CreateText(index + 200000, text$)
		SetTextSize(index + 200000, textSize)
		SetTextPosition(index + 200000, xPos#, yPos# - (GetTextTotalHeight(index + 200000) / 2))
		SetTextAlignment(index + 200000, 1)
		SetTextColor(index + 200000, 0, 0, 0, 255)
	endif
	if GetTextTotalWidth(index + 200000) > xSize# and GetTextTotalHeight(index + 200000) > ySize#
		SetSpriteSize(index + 200000, GetTextTotalWidth(index + 200000) + 20, GetTextTotalHeight(index + 200000) + 20)
	elseif GetTextTotalWidth(index + 200000) > xSize#
		SetSpriteSize(index + 200000, GetTextTotalWidth(index + 200000) + 20, ySize#)
	elseif GetTextTotalHeight(index + 200000) > ySize#
		SetSpriteSize(index + 200000, xSize#, GetTextTotalHeight(index + 200000) + 20)
	endif
	SetSpriteColor(index + 200000, 160, 160, 160, 255)
endfunction 0

function setButtonImage( index, image )
	SetSpriteImage(index + 200000,image)
endfunction

//------------------------------------------------------ Gradient Functions

function gradient( R1, G1, B1, R2, G2, B2, direction )
	t_width# = GetVirtualWidth() : t_height# = GetVirtualHeight()
	id = CreateRenderImage(t_width#,t_height#,0,0)
	SetRenderToImage(id,0)
	
	r# = R1
	g# = G1
	b# = B1
	if direction = 0
		y = 0
		y2 = 0
		r_step# = abs((R2 - R1) / t_height#)
		g_step# = abs((G2 - G1) / t_height#)
		b_step# = abs((B2 - B1) / t_height#)
		for i = 1 to t_height#
			DrawLine(0,y,t_width#,y2,r#,g#,b#)
			inc y
			inc y2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	elseif direction = 1
		y = t_width#
		y2 = t_width#
		r_step# = abs((R2 - R1) / t_height#)
		g_step# = abs((G2 - G1) / t_height#)
		b_step# = abs((B2 - B1) / t_height#)
		for i = 1 to t_height#
			DrawLine(0,y,t_width#,y2,r#,g#,b#)
			dec y
			dec y2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	elseif direction = 2
		x = 0
		x2 = 0
		r_step# = abs((R2 - R1) / t_width#)
		g_step# = abs((G2 - G1) / t_width#)
		b_step# = abs((B2 - B1) / t_width#)
		for i = 1 to t_width#
			DrawLine(x,0,x2,t_height#,r#,g#,b#)
			inc x
			inc x2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	elseif direction = 3
		x = t_width#
		x2 = t_width#
		r_step# = abs((R2 - R1) / t_width#)
		g_step# = abs((G2 - G1) / t_width#)
		b_step# = abs((B2 - B1) / t_width#)
		for i = 1 to t_width#
			DrawLine(x,0,x2,t_height#,r#,g#,b#)
			dec x
			dec x2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	endif

SetRenderToScreen()
endfunction id

+ Code Snippet


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

// set display properties
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

// globals section
global gradient_image as integer
global random_variable as integer
global random_variable2 as integer

// create the gradient image
gradient_image = gradient( Random(100,225), Random(100,225), Random(100,225), Random(100,225), Random(100,225), Random(100,225), 2)

// call button function early to create it so you can set the image to the gradient
button(1, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 100, 0, 0, 30, 1, "Button 1" )
setButtonImage( 1, gradient_image )

button(2, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 300, 0, 0, 30, 0, "Button 2" )
setButtonImage( 2, gradient_image )

do
	// calling the button function while in the do loop will create it also.
	// the button function serves two purposes, to create it and to check if you pressed the button with the pointer functions
	if button(1, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 100, 0, 0, 30, 1, "Button 1" ) = 1
		// do something...
		inc random_variable
	endif
	if button(2, GetPointerX(), GetPointerY(), GetVirtualWidth() / 2, 300, 0, 0, 30, 0, "Button 2" ) = 1
		// do something...
		inc random_variable2
	endif
    Print( "FPS: " + str(ScreenFPS(),0) )
    Print("random_variable: " + str(random_variable))
    Print("random_variable2: " + str(random_variable2))
    Sync()
loop
// ------------------------------------------------------------------ button functions

// button create and check
function button(index, x#, y#, xPos#, yPos#, xSize#, ySize#, textSize, hold, text$ )
	if hold = 1
		if GetPointerState() = 1
			if GetSpriteHitTest(index + 200000, x#, y#) = 1
				SetSpriteColor(index + 200000, 80, 80, 80, 255)
				exitfunction 1
			endif
			exitfunction 0
		endif
	else
		if GetPointerState() = 1
			if GetPointerPressed() = 1
				if GetSpriteHitTest(index + 200000, x#, y#) = 1
					SetSpriteColor(index + 200000, 80, 80, 80, 255)
					exitfunction 1
				endif
			else
			exitfunction 0
			endif
		endif
	endif
	if GetSpriteExists(index + 200000) = 0
		CreateSprite(index + 200000, 0)
		SetSpriteSize(index + 200000, xSize#, ySize#)
		SetSpriteOffset(index + 200000, GetSpriteWidth(index + 200000) / 2, GetSpriteHeight(index + 200000) / 2)
		SetSpritePositionByOffset(index + 200000, xPos#, yPos#)
	endif
	if GetTextExists(index + 200000) = 0
		CreateText(index + 200000, text$)
		SetTextSize(index + 200000, textSize)
		SetTextPosition(index + 200000, xPos#, yPos# - (GetTextTotalHeight(index + 200000) / 2))
		SetTextAlignment(index + 200000, 1)
		SetTextColor(index + 200000, 0, 0, 0, 255)
	endif
	if GetTextTotalWidth(index + 200000) > xSize# and GetTextTotalHeight(index + 200000) > ySize#
		SetSpriteSize(index + 200000, GetTextTotalWidth(index + 200000) + 20, GetTextTotalHeight(index + 200000) + 20)
	elseif GetTextTotalWidth(index + 200000) > xSize#
		SetSpriteSize(index + 200000, GetTextTotalWidth(index + 200000) + 20, ySize#)
	elseif GetTextTotalHeight(index + 200000) > ySize#
		SetSpriteSize(index + 200000, xSize#, GetTextTotalHeight(index + 200000) + 20)
	endif
	SetSpriteColor(index + 200000, 160, 160, 160, 255)
endfunction 0

function setButtonImage( index, image )
	SetSpriteImage(index + 200000,image)
endfunction

//------------------------------------------------------ Gradient Functions


function gradient( R1, G1, B1, R2, G2, B2, direction )
	t_width# = GetVirtualWidth() : t_height# = GetVirtualHeight()
	id = CreateRenderImage(t_width#,t_height#,0,0)
	SetRenderToImage(id,0)
	
	r# = R1
	g# = G1
	b# = B1
	if direction = 0
		y = 0
		y2 = 0
		r_step# = abs((R2 - R1) / t_height#)
		g_step# = abs((G2 - G1) / t_height#)
		b_step# = abs((B2 - B1) / t_height#)
		for i = 1 to t_height#
			DrawLine(0,y,t_width#,y2,r#,g#,b#)
			inc y
			inc y2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	elseif direction = 1
		y = t_width#
		y2 = t_width#
		r_step# = abs((R2 - R1) / t_height#)
		g_step# = abs((G2 - G1) / t_height#)
		b_step# = abs((B2 - B1) / t_height#)
		for i = 1 to t_height#
			DrawLine(0,y,t_width#,y2,r#,g#,b#)
			dec y
			dec y2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	elseif direction = 2
		x = 0
		x2 = 0
		r_step# = abs((R2 - R1) / t_width#)
		g_step# = abs((G2 - G1) / t_width#)
		b_step# = abs((B2 - B1) / t_width#)
		for i = 1 to t_width#
			DrawLine(x,0,x2,t_height#,r#,g#,b#)
			inc x
			inc x2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	elseif direction = 3
		x = t_width#
		x2 = t_width#
		r_step# = abs((R2 - R1) / t_width#)
		g_step# = abs((G2 - G1) / t_width#)
		b_step# = abs((B2 - B1) / t_width#)
		for i = 1 to t_width#
			DrawLine(x,0,x2,t_height#,r#,g#,b#)
			dec x
			dec x2
			if R1 < R2
				inc r#, r_step#
			elseif R1 > R2
				dec r#, r_step#
			endif
			if G1 < G2
				inc g#, g_step#
			elseif G1 > G2
				dec g#, g_step#
			endif
			if B1 < B2
				inc b#, b_step#
			elseif B1 > B2
				dec b#, b_step#
			endif
		next i
	endif

	SetRenderToScreen()
endfunction id

Back to top

Profile PM

Sorry your browser is not supported!

Newcomers AppGameKit Corner / Text to Sprite for better "Buttons"

Sorry your browser is not supported!

Newcomers AppGameKit Corner / Text to Sprite for better &quot;Buttons&quot;

Newcomers AppGameKit Corner / Text to Sprite for better "Buttons"