Help needed with Sprite button function

Author

Message

DemonHill

16

Years of Service

User Offline

Joined: 20th Mar 2008

Location:

Posted: 29th Oct 2017 10:40 Edited at: 29th Oct 2017 10:57

Link

I am new to AppGameKit having used Dark Basic Pro in the past. Try as I may I cant get this function working. I am trying to create a function to use a three state sprite image for hover over and pressing, however I get a sprite position at 0,0, even though I declare coordinates and get a button in the right place... not sure if this is inherent in AppGameKit or the way I an using functions etc.

I would really appreciate someone looking at the code below... Media attached also

// Project: ButtonGUI 
// Created: 2017-10-29

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts

Loadimage(1, "button1.png")
Loadimage(2, "button1hover.png")
Loadimage(3, "button1pressed.png")
Global mx1 as Integer
Global my1 as Integer

// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)

do
    
    
    ThreeStateButton(100,100,190,40,1,2,3)
        
    
displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop

//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(mx1,my1,sizemx,sizemy,normimage,hoverImage,pressedimage)
   Pressed=0
   Image=CreateSprite(normimage)
   mousex= getpointerX()
   mousey= getpointerY()
   
  // Detect if cursor over button 
  If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Hover=1
                    Image=hoverImage
                    Image=CreateSprite(hoverimage)
                    SetSpritePosition (Image,mx1,my1)
                    Print  ("hover")
                            
              Else 
				  //Display normal buttom image  with no hoverover
				   Image=CreateSprite(normimage)
				  SetSpritePosition (Image,mx1,my1)
        
   Endif
   
   
   
   
   
   //detect if button is hovered over and pressed
   If GetPointerReleased() 
	   
	   If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Pressed=1
                    Image=pressedImage
                    Image=CreateSprite(pressedimage)
                    SetSpritePosition (Image,mx1,my1)
                    Print  ("pressed")
		Endif
   
   Endif
   
   
   
   // SetSpritePosition (image,mx1,my1)
   
   
Endfunction pressed

Function displaycoords()
	x= getpointerX()
	y= getpointerY()
	
	print(str(x) + " ," + str(y))
Endfunction

+ Code Snippet



// Project: ButtonGUI 
// Created: 2017-10-29

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts

Loadimage(1, "button1.png")
Loadimage(2, "button1hover.png")
Loadimage(3, "button1pressed.png")
Global mx1 as Integer
Global my1 as Integer


// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)

do
    
    
    ThreeStateButton(100,100,190,40,1,2,3)
        
    
displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop


//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(mx1,my1,sizemx,sizemy,normimage,hoverImage,pressedimage)
   Pressed=0
   Image=CreateSprite(normimage)
   mousex= getpointerX()
   mousey= getpointerY()
   
  // Detect if cursor over button 
  If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Hover=1
                    Image=hoverImage
                    Image=CreateSprite(hoverimage)
                    SetSpritePosition (Image,mx1,my1)
                    Print  ("hover")
                            
              Else 
				  //Display normal buttom image  with no hoverover
				   Image=CreateSprite(normimage)
				  SetSpritePosition (Image,mx1,my1)
        
   Endif
   
   
   
   
   
   //detect if button is hovered over and pressed
   If GetPointerReleased() 
	   
	   If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Pressed=1
                    Image=pressedImage
                    Image=CreateSprite(pressedimage)
                    SetSpritePosition (Image,mx1,my1)
                    Print  ("pressed")
		Endif
   
   Endif
   
   
   
   // SetSpritePosition (image,mx1,my1)
   
   
Endfunction pressed



Function displaycoords()
	x= getpointerX()
	y= getpointerY()
	
	print(str(x) + " ," + str(y))
Endfunction

Attachments

Login to view attachments

Back to top

Profile PM Website

puzzler2018

User Banned

Posted: 29th Oct 2017 11:19 Edited at: 29th Oct 2017 11:26

Link

Try

// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
Loadimage(1, "button1.png")
Loadimage(2, "button1hover.png")
Loadimage(3, "button1pressed.png")
Global mx1 as Integer
Global my1 as Integer
global normimage, hoverimage, pressedimage as integer

normImage=CreateSprite(1)
HoverImage=CreateSprite(2)
pressedimage=createsprite(3)
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
do
     
     
    ThreeStateButton(100,100,190,40)
         
     
displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(mx1,my1,sizemx,sizemy)
   Pressed=0
   mousex= getpointerX()
   mousey= getpointerY()
    
  // Detect if cursor over button 
  If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Hover=1
                    SetSpritePosition (hoverImage,mx1,my1)
		SetSpriteVisible(pressedimage,0)
		SetSpriteVisible(hoverimage,1)
		
		SetSpriteVisible(normimage,0)
                    Print  ("hover")
                             
              Else 
                  //Display normal buttom image  with no hoverover
                  SetSpritePosition (normimage,mx1,my1)
		SetSpriteVisible(pressedimage,0)
		SetSpriteVisible(normimage,1)
		SetSpriteVisible(hoverimage,0)
         
   Endif
    
    
    
    
    
   //detect if button is hovered over and pressed
   If GetPointerReleased() 
        
       If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Pressed=1
                    SetSpritePosition (pressedImage,mx1,my1)
                    		SetSpriteVisible(hoverimage,0)
                    		SetSpriteVisible(pressedimage,1)
		SetSpriteVisible(normimage,0)

Print  ("pressed")
        Endif
    
   Endif
    
    
    
   // SetSpritePosition (image,mx1,my1)
    
    
Endfunction pressed
 
 
 
Function displaycoords()
    x= getpointerX()
    y= getpointerY()
     
    print(str(x) + " ," + str(y))
    sleep(100)
Endfunction

+ Code Snippet

// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
Loadimage(1, "button1.png")
Loadimage(2, "button1hover.png")
Loadimage(3, "button1pressed.png")
Global mx1 as Integer
Global my1 as Integer
global normimage, hoverimage, pressedimage as integer

normImage=CreateSprite(1)
HoverImage=CreateSprite(2)
pressedimage=createsprite(3)
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
do
     
     
    ThreeStateButton(100,100,190,40)
         
     
displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(mx1,my1,sizemx,sizemy)
   Pressed=0
   mousex= getpointerX()
   mousey= getpointerY()
    
  // Detect if cursor over button 
  If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Hover=1
                    SetSpritePosition (hoverImage,mx1,my1)
		SetSpriteVisible(pressedimage,0)
		SetSpriteVisible(hoverimage,1)
		
		SetSpriteVisible(normimage,0)
                    Print  ("hover")
                             
              Else 
                  //Display normal buttom image  with no hoverover
                  SetSpritePosition (normimage,mx1,my1)
		SetSpriteVisible(pressedimage,0)
		SetSpriteVisible(normimage,1)
		SetSpriteVisible(hoverimage,0)
         
   Endif
    
    
    
    
    
   //detect if button is hovered over and pressed
   If GetPointerReleased() 
        
       If mousex>mx1 and mousex<mx1+sizemx and mousey>my1 and mousey<my1+sizemy
                    Pressed=1
                    SetSpritePosition (pressedImage,mx1,my1)
                    		SetSpriteVisible(hoverimage,0)
                    		SetSpriteVisible(pressedimage,1)
		SetSpriteVisible(normimage,0)

                    Print  ("pressed")
        Endif
    
   Endif
    
    
    
   // SetSpritePosition (image,mx1,my1)
    
    
Endfunction pressed
 
 
 
Function displaycoords()
    x= getpointerX()
    y= getpointerY()
     
    print(str(x) + " ," + str(y))
    sleep(100)
Endfunction

I see in the code that your repeating creating sprites during the main loop processing - this is a no no

I have tweaked it a bit for you

EDIT - remove the sleep(100) - (line 102) I put it there to see it in action to be a little slower
D

Back to top

Profile

puzzler2018

User Banned

Posted: 29th Oct 2017 13:48

Link

Optimised it just slightly

// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
Loadimage(1, "button1.png")
Loadimage(2, "button1hover.png")
Loadimage(3, "button1pressed.png")
Global mx1 as Integer
Global my1 as Integer
global mouse as integer // create a sprite to move with the mouse and use sprite collisions to detect hits
mouse=createsprite(getimage(0,0,1,1)) // create a 1x1 pixel for the mouse

// initialise the buttons
global button as integer[3] // three style - 1-Normal Image, 2-Hover image, 3-Pressed
for a=1 to 3
	button[a]=CreateSprite(a)
next
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
     
do 
    ThreeStateButton(100,100)
    displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(mx1,my1)
	//make all buttons invisible
	for a=1 to button.length
		SetSpritePosition(button[a],mx1,my1)
		SetSpriteVisible(button[a],0)
	next
	// by default display the normal image
	SetSpriteVisible(button[1],1)
	
	// if the mouse sprite hits the normal image
	if GetSpriteCollision(mouse, button[1]) //check if mouse collides with normal image
		SetSpriteVisible(button[2],1) // show hover
	endif
	
	// if the mouse sprite hits the normal image and the mouse button is pressed
	if GetSpriteCollision(mouse, button[1]) and GetPointerstate()=1 // check if mouse collides with normal image and button is perssed
		SetSpriteVisible(button[3],1) // show pressed
	endif
    
Endfunction
 
 
 
Function displaycoords()
	// attach the 1 x 1 mouse sprite to the mouseitself
    x= getpointerX()
    y= getpointerY()
     SetSpritePosition(mouse,x,y)
 
		
    print(str(x) + " ," + str(y))
    
Endfunction

+ Code Snippet


// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
Loadimage(1, "button1.png")
Loadimage(2, "button1hover.png")
Loadimage(3, "button1pressed.png")
Global mx1 as Integer
Global my1 as Integer
global mouse as integer // create a sprite to move with the mouse and use sprite collisions to detect hits
mouse=createsprite(getimage(0,0,1,1)) // create a 1x1 pixel for the mouse

// initialise the buttons
global button as integer[3] // three style - 1-Normal Image, 2-Hover image, 3-Pressed
for a=1 to 3
	button[a]=CreateSprite(a)
next
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
     
do 
    ThreeStateButton(100,100)
    displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(mx1,my1)
	//make all buttons invisible
	for a=1 to button.length
		SetSpritePosition(button[a],mx1,my1)
		SetSpriteVisible(button[a],0)
	next
	// by default display the normal image
	SetSpriteVisible(button[1],1)
	
	// if the mouse sprite hits the normal image
	if GetSpriteCollision(mouse, button[1]) //check if mouse collides with normal image
		SetSpriteVisible(button[2],1) // show hover
	endif
	
	// if the mouse sprite hits the normal image and the mouse button is pressed
	if GetSpriteCollision(mouse, button[1]) and GetPointerstate()=1 // check if mouse collides with normal image and button is perssed
		SetSpriteVisible(button[3],1) // show pressed
	endif
    
Endfunction
 
 
 
Function displaycoords()
	// attach the 1 x 1 mouse sprite to the mouseitself
    x= getpointerX()
    y= getpointerY()
     SetSpritePosition(mouse,x,y)
 
		
    print(str(x) + " ," + str(y))
    
Endfunction

If need anymore assist then let us know

Have fun with AppGameKit and welcome

D

Back to top

Profile

DemonHill

16

Years of Service

User Offline

Joined: 20th Mar 2008

Location:

Posted: 29th Oct 2017 14:22 Edited at: 29th Oct 2017 14:47

Link

really appreciated guys, works great thanks, although what if I want multiple buttons with different images... hence why I declared the Function ThreeStateButton(mx1,my1,norm_image,hover_image,pressed_image) originally... so you could call the function but with different images for subsequent buttons... how would that work ?

Back to top

Profile PM Website

puzzler2018

User Banned

Posted: 29th Oct 2017 15:24 Edited at: 29th Oct 2017 15:34

Link

Multiple buttons

// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
global mouse as integer // create a sprite to move with the mouse and use sprite collisions to detect hits
mouse=createsprite(getimage(0,0,1,1)) // create a 1x1 pixel for the mouse

// initialise the buttons
type _buttons
	normal, pressed, hover //there images
endtype
	
	
global button as _buttons[8] // s many buttons as you need

for a=1 to button.length
	
	button[a].normal = CreateSprite(Loadimage("button1.png"))
	button[a].hover = CreateSprite(Loadimage("button1hover.png"))
	button[a].pressed = CreateSprite(Loadimage("button1pressed.png"))

next
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
     
do 
	//place the buttons (increase the array length (line 28) to add more or less
    ThreeStateButton(1,100,100)
    ThreeStateButton(2,100,200)
    ThreeStateButton(3,100,300)
    ThreeStateButton(4,100,400)
    ThreeStateButton(5,400,100)
    ThreeStateButton(6,400,200)
    ThreeStateButton(7,400,300)
    ThreeStateButton(8,400,400)
    displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(but,mx1,my1)
	// position all subimages
		SetSpritePosition(button[but].normal,mx1,my1)
		SetSpritePosition(button[but].pressed,mx1,my1)
		SetSpritePosition(button[but].hover,mx1,my1)
		
	// Reset them to invisible except the normal 
		SetSpriteVisible(button[but].pressed,0)
		SetSpriteVisible(button[but].hover,0)
	// by default display the normal image
	SetSpriteVisible(button[but].normal,1)
	
	// if the mouse sprite hits the normal image
	if GetSpriteCollision(mouse, button[but].normal) //check if mouse collides with normal image
		SetSpriteVisible(button[but].hover,1) // show hover
	endif
	
	// if the mouse sprite hits the normal image and the mouse button is pressed
	if GetSpriteCollision(mouse, button[but].normal) and GetPointerstate()=1 // check if mouse collides with normal image and button is perssed
		SetSpriteVisible(button[but].pressed,1) // show pressed
	endif
    
Endfunction
 
 
 
Function displaycoords()
	// attach the 1 x 1 mouse sprite to the mouseitself
    x= getpointerX()
    y= getpointerY()
     SetSpritePosition(mouse,x,y)
 
		
    print(str(x) + " ," + str(y))
    
Endfunction

+ Code Snippet

// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
global mouse as integer // create a sprite to move with the mouse and use sprite collisions to detect hits
mouse=createsprite(getimage(0,0,1,1)) // create a 1x1 pixel for the mouse

// initialise the buttons
type _buttons
	normal, pressed, hover //there images
endtype
	
	
global button as _buttons[8] // s many buttons as you need

for a=1 to button.length
	
	button[a].normal = CreateSprite(Loadimage("button1.png"))
	button[a].hover = CreateSprite(Loadimage("button1hover.png"))
	button[a].pressed = CreateSprite(Loadimage("button1pressed.png"))

next
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
     
do 
	//place the buttons (increase the array length (line 28) to add more or less
    ThreeStateButton(1,100,100)
    ThreeStateButton(2,100,200)
    ThreeStateButton(3,100,300)
    ThreeStateButton(4,100,400)
    ThreeStateButton(5,400,100)
    ThreeStateButton(6,400,200)
    ThreeStateButton(7,400,300)
    ThreeStateButton(8,400,400)
    displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(but,mx1,my1)
	// position all subimages
		SetSpritePosition(button[but].normal,mx1,my1)
		SetSpritePosition(button[but].pressed,mx1,my1)
		SetSpritePosition(button[but].hover,mx1,my1)
		
	// Reset them to invisible except the normal 
		SetSpriteVisible(button[but].pressed,0)
		SetSpriteVisible(button[but].hover,0)
	// by default display the normal image
	SetSpriteVisible(button[but].normal,1)
	
	// if the mouse sprite hits the normal image
	if GetSpriteCollision(mouse, button[but].normal) //check if mouse collides with normal image
		SetSpriteVisible(button[but].hover,1) // show hover
	endif
	
	// if the mouse sprite hits the normal image and the mouse button is pressed
	if GetSpriteCollision(mouse, button[but].normal) and GetPointerstate()=1 // check if mouse collides with normal image and button is perssed
		SetSpriteVisible(button[but].pressed,1) // show pressed
	endif
    
Endfunction
 
 
 
Function displaycoords()
	// attach the 1 x 1 mouse sprite to the mouseitself
    x= getpointerX()
    y= getpointerY()
     SetSpritePosition(mouse,x,y)
 
		
    print(str(x) + " ," + str(y))
    
Endfunction

EDIT:- added a buttonpressed (to let the app know which was pressed

// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
global mouse,buttonpressed as integer // create a sprite to move with the mouse and use sprite collisions to detect hits
mouse=createsprite(getimage(0,0,1,1)) // create a 1x1 pixel for the mouse

// initialise the buttons
type _buttons
	normal, pressed, hover //there images
endtype
	
	
global button as _buttons[8] // s many buttons as you need

for a=1 to button.length
	
	button[a].normal = CreateSprite(Loadimage("button1.png"))
	button[a].hover = CreateSprite(Loadimage("button1hover.png"))
	button[a].pressed = CreateSprite(Loadimage("button1pressed.png"))

next
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
     
do 
	//place the buttons (increase the array length (line 28) to add more or less
    
    ThreeStateButton(1,100,100)
    ThreeStateButton(2,100,200)
    ThreeStateButton(3,100,300)
    ThreeStateButton(4,100,400)
    ThreeStateButton(5,400,100)
    ThreeStateButton(6,400,200)
    ThreeStateButton(7,400,300)
    ThreeStateButton(8,400,400)
    displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(but,mx1,my1)
	// position all subimages
		SetSpritePosition(button[but].normal,mx1,my1)
		SetSpritePosition(button[but].pressed,mx1,my1)
		SetSpritePosition(button[but].hover,mx1,my1)
		
	// Reset them to invisible except the normal 
		SetSpriteVisible(button[but].pressed,0)
		SetSpriteVisible(button[but].hover,0)
	// by default display the normal image
	SetSpriteVisible(button[but].normal,1)
	
	// if the mouse sprite hits the normal image
	if GetSpriteCollision(mouse, button[but].normal) //check if mouse collides with normal image
		SetSpriteVisible(button[but].hover,1) // show hover
	endif
	
	// if the mouse sprite hits the normal image and the mouse button is pressed
	if GetSpriteCollision(mouse, button[but].normal) and GetPointerstate()=1 // check if mouse collides with normal image and button is perssed
		SetSpriteVisible(button[but].pressed,1) // show pressed
		buttonpressed=but
	endif
    
Endfunction but
 
 
 
Function displaycoords()
	// attach the 1 x 1 mouse sprite to the mouseitself
    x= getpointerX()
    y= getpointerY()
     SetSpritePosition(mouse,x,y)
 
		
    print(str(x) + " ," + str(y))
    print ("Button pressed:- " + str(buttonpressed))
    
Endfunction

+ Code Snippet

// Project: ButtonGUI 
// Created: 2017-10-29
 
// show all errors
SetErrorMode(2)
 
// set window properties
SetWindowTitle( "ButtonGUI" )
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 ) // since version 2.0.22 we can use nicer default fonts
 
global mouse,buttonpressed as integer // create a sprite to move with the mouse and use sprite collisions to detect hits
mouse=createsprite(getimage(0,0,1,1)) // create a 1x1 pixel for the mouse

// initialise the buttons
type _buttons
	normal, pressed, hover //there images
endtype
	
	
global button as _buttons[8] // s many buttons as you need

for a=1 to button.length
	
	button[a].normal = CreateSprite(Loadimage("button1.png"))
	button[a].hover = CreateSprite(Loadimage("button1hover.png"))
	button[a].pressed = CreateSprite(Loadimage("button1pressed.png"))

next
 
// ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)
 
     
do 
	//place the buttons (increase the array length (line 28) to add more or less
    
    ThreeStateButton(1,100,100)
    ThreeStateButton(2,100,200)
    ThreeStateButton(3,100,300)
    ThreeStateButton(4,100,400)
    ThreeStateButton(5,400,100)
    ThreeStateButton(6,400,200)
    ThreeStateButton(7,400,300)
    ThreeStateButton(8,400,400)
    displaycoords()
    //Print( ScreenFPS() )
    Sync()
loop
 
 
//FUNCTION FOR 3 STATE BUTTON
Function ThreeStateButton(but,mx1,my1)
	// position all subimages
		SetSpritePosition(button[but].normal,mx1,my1)
		SetSpritePosition(button[but].pressed,mx1,my1)
		SetSpritePosition(button[but].hover,mx1,my1)
		
	// Reset them to invisible except the normal 
		SetSpriteVisible(button[but].pressed,0)
		SetSpriteVisible(button[but].hover,0)
	// by default display the normal image
	SetSpriteVisible(button[but].normal,1)
	
	// if the mouse sprite hits the normal image
	if GetSpriteCollision(mouse, button[but].normal) //check if mouse collides with normal image
		SetSpriteVisible(button[but].hover,1) // show hover
	endif
	
	// if the mouse sprite hits the normal image and the mouse button is pressed
	if GetSpriteCollision(mouse, button[but].normal) and GetPointerstate()=1 // check if mouse collides with normal image and button is perssed
		SetSpriteVisible(button[but].pressed,1) // show pressed
		buttonpressed=but
	endif
    
Endfunction but
 
 
 
Function displaycoords()
	// attach the 1 x 1 mouse sprite to the mouseitself
    x= getpointerX()
    y= getpointerY()
     SetSpritePosition(mouse,x,y)
 
		
    print(str(x) + " ," + str(y))
    print ("Button pressed:- " + str(buttonpressed))
    
Endfunction

D

Back to top

Profile

DemonHill

16

Years of Service

User Offline

Joined: 20th Mar 2008

Location:

Posted: 29th Oct 2017 16:30

Link

But how do you have different buttons ? i.e. with different sprites ? Sorry that's why I had the Function with the image to be used declared originally....

ThreestateButton (posx,posy,sizex,sizey,norm_image,hover_image,pressed_image)

With integers for the 3 images for each button.

So for one button you would have

ThreestateButton (posx,posy,sizex,sizey,50,51,52) where the images for the three buttons are 50,51 and 52

and

ThreestateButton (posx,posy,sizex,sizey,60,61,61) where for this button you would use 3 other images..

Back to top

Profile PM Website

puzzler2018

User Banned

Posted: 29th Oct 2017 16:35

Link

Maybe change the load code to something like
button[a].normal = CreateSprite(Loadimage("button"+str(a)+".png"))
button[a].hover = CreateSprite(Loadimage("button"+str(a)+".hover.png"))
button[a].pressed = CreateSprite(Loadimage("button"+str(a)+".pressed.png"))

Then making sure your actual images are like this

button1normal.png, button1pressed.png, button1hover.png
button2normal.png, button2pressed.png, button2hover.png
button3normal.png, button3pressed.png, button3hover.png
button4normal.png, button4pressed.png, button4hover.png
button5normal.png, button5pressed.png, button5hover.png
button6normal.png, button6pressed.png, button6hover.png
button7normal.png, button7pressed.png, button7hover.png
button8normal.png, button8pressed.png, button8hover.png

Back to top

Profile

DemonHill

16

Years of Service

User Offline

Joined: 20th Mar 2008

Location:

Posted: 29th Oct 2017 17:10

Link

Perfect, just figured that out, but not as quickly as you responded. really appreciate the support thanks

Back to top

Profile PM Website

puzzler2018

User Banned

Posted: 29th Oct 2017 17:13

Link

Your welcome

Back to top

Profile

Sorry your browser is not supported!

Newcomers AppGameKit Corner / Help needed with Sprite button function

Attachments