Text Box with Scroll Bars - GameCreators Forum

Author

Message

Laughing Coyote Software

6

Years of Service

User Offline

Joined: 30th Jun 2018

Playing: SKALD

Posted: 6th May 2025 07:37 Edited at: 6th May 2025 07:39

Link

Hello,

I noticed AppGameKit Studio is on sale on Steam right now until May 12. Thinking of buying.

I'm using AppGameKit Classic for Warlordocracy (and DarkBASIC for Brigand). I like how easy it is to compile AppGameKit for Linux and Android, as well as Windows, and I want to make a cross-platform notepad app that modders can use for scripting for both games. I can make a multi-line edit box in AppGameKit Classic, but it's not easy to make a scroll bar.

Is it easy to make an edit box with automatic scroll bars in AppGameKit Studio by any chance? Also, are there visual features I can add similar to Visual Studio to make Windows apps, like drop boxes, checkboxes, etc.? Again, I want to use AppGameKit because I really love how easy it is to compile across all platforms. Thanks for any advice.

Brian
Laughing Coyote Software

laughingcoyote.net

Back to top

Profile PM Email Website

Laughing Coyote Software

6

Years of Service

User Offline

Joined: 30th Jun 2018

Playing: SKALD

Posted: 6th May 2025 08:38

Link

Oops, this should probably be in the AppGameKit Studio forum. Should I repost it?

laughingcoyote.net

Back to top

Profile PM Email Website

Virtual Nomad

Moderator

19

Years of Service

User Offline

Joined: 14th Dec 2005

Location: SF Bay Area, USA

Posted: 6th May 2025 09:11

Link

Quote: "Should I repost it?"

nope. i've moved it

AGK Resource Directory
Made with AppGameKit on Itch.io
VN @ itch.io | AGK Jam HQ
Some Snippets

Back to top

Profile PM Website

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 6th May 2025 20:56 Edited at: 6th May 2025 21:00

Link

I'll have a solution for you this evening (hopefully). Scroll box is simple, adding scroll bars is trivial. Editing text definitely adds complexity, even more so if the font isn't a fixed-width. BUT, it's doable.
Here's a screenshot of what I have so far for ya. The window is resizable. Text is clipped to the window but also I think there's a simple method for word-wrapping if you don't want the horizontal scrollable. Scrollbars are not yet implement, but that's the easy part. The tricky part was getting a caret to position at the correct character location in the text when clicked, but that's complete now. The window text is a single string and inserts new line characters for you. I still have to implement inserting the text at the caret position and handling the delete/backspace keys.

// Project: scrollbox 
// Created: 2025-05-06

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "scrollbox" )
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(0, 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

#CONSTANT _N = chr(10)+chr(13)

Type ResizableBox
	TL as integer
	TM as integer
	TR as integer
	L  as integer
	M  as integer
	R  as integer
	BL as integer
	BM as integer
	BR as integer
	resize as integer
	ox as integer
	oy as integer
	t as integer
	caretX as integer
	caretY as integer
	caretFlash as integer
	showCaret as integer
EndType

mybox as ResizableBox

mybox = createResizableBox(loadImage("box.png"), 11, 11)

setResizableBoxSize(mybox, 200, 300)

setResizableBoxPosition(mybox, 200,200)

setResizableBoxSize(mybox, 300, 200)

c1 = random()*4294967295  : c2 = random()*4294967295  : c3 = random()*4294967295  : c4 = random()*4294967295 
drawBox(0,0,1024,768,c1, c2, c3, c4, 1)
q = createSprite(getImage(0, 0, 1024,768))
setSpriteDepth(q, 40)

c = 0xFF0000

do
	
	
    
    if doinput = 1
		if getRawKeyPressed(13) then setTextString(mybox.t, getTextString(mybox.t) + _N)
		if getCharBufferLength() > 0 then setTextString(mybox.t, getTextString(mybox.t) + getCharBuffer())
		viewWidth  = getTextTotalWidth(mybox.t)
		viewHeight = getTextTotalHeight(mybox.t)
	endif
	
    if getRawKeyPressed(13) = 1 and doinput = 0
		doinput = 1
		getCharBuffer()
		s$ = getTextString(mybox.t)
		replaceString(s$, _N, "-", -1)
		setTextString(mybox.t, s$)
	endif

handleResizableBox(mybox)

//print(""):print(""):print(""):print(""):print(""):print(""):print("")

Sync()
loop

function setCaret(r ref as ResizableBox)

dummy = createText("")
	setTextVisible(dummy, 0)
	setTextSize(dummy, getTextSize(r.t))

textOffsetX = getSpriteX(r.TL) + getSpriteWidth(r.TL)
	textOffsetY = getSpriteY(r.TL) + getSpriteHeight(r.TL)

mx = getRawMouseX() - textOffsetX
	my = getRawMouseY() - textOffsetY
	
	totalRows = floor(getTextTotalHeight(r.t) / getTextSize(r.t))

row = floor(my / getTextSize(r.t))
	
	if row > totalRows-1 then row = totalRows-1
	if row < 0 then row = 0

s$ = getTextString(r.t)
	
	
	if row >= totalRows
		A = len(s$)
		B = A
	else
	
		A = 0
		B = 0
		rows = 0
		for i = 1 to len(s$)-1
			if mid(s$, i, 2) = _N then inc rows
			
			if rows = row and A = 0
				A = i
			endif
			if A > 0 and B = 0 and rows = row+1
				B = i
				i = len(s$)
			endif
		next i
		
		if A = 0 then A = 1
		if B = 0 then B = len(s$)
	endif

l$ = mid(s$, A, B-A+1)
	
	caretX = 0
	
	t$ = "_"
	for i = 1 to len(l$)
		setTextString(dummy, mid(l$, 1, i))
		x = getTextTotalWidth(dummy)
		
		if x >= mx or i = len(l$)
			t$ = mid(l$, i, 1)
			caretX = x
			exit
		endif
	next i
	setTextString(dummy, l$)
	if row = 0 and mx <= 0 then caretX = 0
	if row = totalRows-1 and mx > getTextTotalWidth(dummy) then caretX = getTextTotalWidth(dummy)
	
	
	r.caretX = caretX
	r.caretY = row*getTextSize(r.t)
	
	deleteText(dummy)
	
	// always show caret when repositioning it
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
		
endfunction

function handleResizableBox(r ref as ResizableBox)
	
	if getRawMouseleftPressed()
		setCaret(r)
	endif
	
	delta = 5
	x = getSpriteX(r.BR) + getSpriteWidth(r.BR)
	y = getSpriteY(r.BR) + getSpriteHeight(r.BR)
	
	mx = getRawMouseX()
	my = getRawMouseY()
	
	if inside(mx, my, x-delta, y-delta, x+delta, y+delta )
print("yup")
		if getRawMouseLeftPressed()
			r.resize = 1
			r.ox = x - mx
			r.oy = y - my
		endif
	endif

if r.resize = 1
		if getRawMouseLeftState() = 1
			width = mx - getSpriteX(r.TL) + r.ox
			if width < getSpriteWidth(r.TL)*3 then width = getSpriteWidth(r.TL)*3
			
			height = my - getSpriteY(r.TL) + r.oy
			if height < getSpriteHeight(r.TL)*3 then height = getSpriteHeight(r.TL)*3
			
			setResizableBoxSize(r, width, height)
		else
			r.resize = 0
		endif
	endif

// draw caret
	ms = getMilliseconds()
	if r.caretFlash + 600 <= ms
		r.caretFlash = ms
		r.showCaret = 1 - r.showCaret
	endif
	
	if r.showCaret = 1
		c = 0xFFFFFF
		textOffsetX = getTextX(r.t)
		textOffsetY = getTextY(r.t)
		drawBox(textOffsetX+r.caretX, textOffsetY+r.caretY, textOffsetX+r.caretX+2, textOffsetY+r.caretY+22, c,c,c,c,1)
	endif
endfunction

function inside(px, py, x1, y1, x2, y2)
	
	if px > x1 and px < x2 and py > y1 and py < y2 then exitfunction 1
	
endfunction 0

function createResizableBox(img, chunkWidth, chunkHeight )
	
	n as ResizableBox
	
	n.TL = createSprite(img) : setSpriteAnimation(n.TL, chunkWidth, chunkHeight, 9)
	n.TM = cloneSprite(n.TL) : setSpriteFrame(n.TM, 2) : setSpritePosition(n.TM, chunkWidth, 0)
	n.TR = cloneSprite(n.TL) : setSpriteFrame(n.TR, 3) : setSpritePosition(n.TR, chunkWidth*2, 0)
	n.L  = cloneSprite(n.TL) : setSpriteFrame(n.L, 4)  : setSpritePosition(n.L, 0, chunkHeight)
	n.M  = cloneSprite(n.TL) : setSpriteFrame(n.M, 5)  : setSpritePosition(n.M, chunkWidth, chunkHeight)
	n.R  = cloneSprite(n.TL) : setSpriteFrame(n.R, 6)  : setSpritePosition(n.R, chunkWidth*2, chunkHeight)
	n.BL = cloneSprite(n.TL) : setSpriteFrame(n.BL, 7) : setSpritePosition(n.BL, 0, chunkHeight*2)
	n.BM = cloneSprite(n.TL) : setSpriteFrame(n.BM, 8) : setSpritePosition(n.BM, chunkWidth, chunkHeight*2)
	n.BR = cloneSprite(n.TL) : setSpriteFrame(n.BR, 9) : setSpritePosition(n.BR, chunkWidth*2, chunkHeight*2)
	
	//n.t = createText("kjlhf klsjda df dfdffddfdasdf asdfajkf asdflkha asdflsdljkasdfk dsaddf"+_N+_N+"askdjfhkjasdhf kausdhfasdf"+_N+"dshflkajsdfasdas")
t$ = "Sing, O goddess, the anger of Achilles son of Peleus, "+_N+"that brought countless ills upon the Achaeans. "
t$ = t$ +_N+_N+"Many a brave soul did it send hurrying down to Hades, "+_N+"and many a hero did it yield a prey to dogs and vultures, "
t$ = t$ +_N+"for so were the counsels of Jove fulfilled from the day on which the son of Atreus, "+_N+"king of men, and great Achilles, first fell out with one another."
	n.t = createText(t$)
	setTextSize(n.t, 22)
	//setTextColor(n.t, 217, 178, 0, 255)
	setTextColor(n.t, 0,0, 0, 255)
	setTextPosition(n.t, chunkWidth, chunkHeight)
	setTextScissor(n.t, chunkWidth, chunkHeight, chunkWidth*2, chunkHeight*2)
	
endfunction n

function setResizableBoxSize(r ref as ResizableBox, width, height)
	x = getSpriteX(r.TL)
	y = getSpriteY(r.TL)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	
	setSpriteSize(r.TM, width-w*2, h)   // upper middle
	setSpritePosition(r.TR, x+width-w, y) // upper right corner
	
	setSpritePosition(r.L, x, y+h)            // left side
	setSpriteSize(r.L, w, height-h*2)
	setSpriteSize(r.M, width-w*2, height-h*2) // body
	setSpritePosition(r.R, x+width-w, y+h)      // right side
	setSpriteSize(r.R, w, height-h*2)
	
	setSpritePosition(r.BL, x, y+height-h)       // bottom left
	setSpriteSize(r.BM, width-w*2, h)            // bottom middle
	setSpritePosition(r.BM, x+w, y+height-h)
	setSpritePosition(r.BR, x+width-w, y+height-h) // bottom right
	
	
	setTextPosition(r.t, x+w, y+h)
	setTextScissor(r.t, x+w, y+h, x+width-w, y+height-h)
	
endfunction

function setResizableBoxPosition(r ref as ResizableBox, x, y)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	width = getSpriteWidth(r.M)
	height = getSpriteHeight(r.M)
	
	setSpritePosition(r.TL, x, y)
	setSpritePosition(r.TM, x+w, y)
	setSpritePosition(r.TR, x+width+w, y)
	
	setSpritePosition(r.L, x, y+h)
	setSpritePosition(r.M, x+w, y+h)
	setSpritePosition(r.R, x+width+w, y+h)
	
	setSpritePosition(r.BL, x, y+height+h)
	setSpritePosition(r.BM, x+w, y+height+h)
	setSpritePosition(r.BR, x+width+w, y+height+h)

setTextPosition(r.t, x, y)
	
endfunction

+ Code Snippet


// Project: scrollbox 
// Created: 2025-05-06

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "scrollbox" )
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(0, 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


#CONSTANT _N = chr(10)+chr(13)



Type ResizableBox
	TL as integer
	TM as integer
	TR as integer
	L  as integer
	M  as integer
	R  as integer
	BL as integer
	BM as integer
	BR as integer
	resize as integer
	ox as integer
	oy as integer
	t as integer
	caretX as integer
	caretY as integer
	caretFlash as integer
	showCaret as integer
EndType



mybox as ResizableBox

mybox = createResizableBox(loadImage("box.png"), 11, 11)

setResizableBoxSize(mybox, 200, 300)


setResizableBoxPosition(mybox, 200,200)

setResizableBoxSize(mybox, 300, 200)


c1 = random()*4294967295  : c2 = random()*4294967295  : c3 = random()*4294967295  : c4 = random()*4294967295 
drawBox(0,0,1024,768,c1, c2, c3, c4, 1)
q = createSprite(getImage(0, 0, 1024,768))
setSpriteDepth(q, 40)

c = 0xFF0000

do
	
	
    
    if doinput = 1
		if getRawKeyPressed(13) then setTextString(mybox.t, getTextString(mybox.t) + _N)
		if getCharBufferLength() > 0 then setTextString(mybox.t, getTextString(mybox.t) + getCharBuffer())
		viewWidth  = getTextTotalWidth(mybox.t)
		viewHeight = getTextTotalHeight(mybox.t)
	endif
	
    if getRawKeyPressed(13) = 1 and doinput = 0
		doinput = 1
		getCharBuffer()
		s$ = getTextString(mybox.t)
		replaceString(s$, _N, "-", -1)
		setTextString(mybox.t, s$)
	endif


	handleResizableBox(mybox)
	



	//print(""):print(""):print(""):print(""):print(""):print(""):print("")

    Sync()
loop



function setCaret(r ref as ResizableBox)

	dummy = createText("")
	setTextVisible(dummy, 0)
	setTextSize(dummy, getTextSize(r.t))

	textOffsetX = getSpriteX(r.TL) + getSpriteWidth(r.TL)
	textOffsetY = getSpriteY(r.TL) + getSpriteHeight(r.TL)


	mx = getRawMouseX() - textOffsetX
	my = getRawMouseY() - textOffsetY
	
	totalRows = floor(getTextTotalHeight(r.t) / getTextSize(r.t))

	row = floor(my / getTextSize(r.t))
	
	if row > totalRows-1 then row = totalRows-1
	if row < 0 then row = 0

	s$ = getTextString(r.t)
	
	
	if row >= totalRows
		A = len(s$)
		B = A
	else
	
		A = 0
		B = 0
		rows = 0
		for i = 1 to len(s$)-1
			if mid(s$, i, 2) = _N then inc rows
			
			if rows = row and A = 0
				A = i
			endif
			if A > 0 and B = 0 and rows = row+1
				B = i
				i = len(s$)
			endif
		next i
		
		if A = 0 then A = 1
		if B = 0 then B = len(s$)
	endif
		

	l$ = mid(s$, A, B-A+1)
	
	caretX = 0
	
	t$ = "_"
	for i = 1 to len(l$)
		setTextString(dummy, mid(l$, 1, i))
		x = getTextTotalWidth(dummy)
		
		if x >= mx or i = len(l$)
			t$ = mid(l$, i, 1)
			caretX = x
			exit
		endif
	next i
	setTextString(dummy, l$)
	if row = 0 and mx <= 0 then caretX = 0
	if row = totalRows-1 and mx > getTextTotalWidth(dummy) then caretX = getTextTotalWidth(dummy)
	
	
	r.caretX = caretX
	r.caretY = row*getTextSize(r.t)
	
	deleteText(dummy)
	
	// always show caret when repositioning it
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
		
endfunction










function handleResizableBox(r ref as ResizableBox)
	
	if getRawMouseleftPressed()
		setCaret(r)
	endif
	
	delta = 5
	x = getSpriteX(r.BR) + getSpriteWidth(r.BR)
	y = getSpriteY(r.BR) + getSpriteHeight(r.BR)
	
	mx = getRawMouseX()
	my = getRawMouseY()
	
	if inside(mx, my, x-delta, y-delta, x+delta, y+delta )
print("yup")
		if getRawMouseLeftPressed()
			r.resize = 1
			r.ox = x - mx
			r.oy = y - my
		endif
	endif

	if r.resize = 1
		if getRawMouseLeftState() = 1
			width = mx - getSpriteX(r.TL) + r.ox
			if width < getSpriteWidth(r.TL)*3 then width = getSpriteWidth(r.TL)*3
			
			height = my - getSpriteY(r.TL) + r.oy
			if height < getSpriteHeight(r.TL)*3 then height = getSpriteHeight(r.TL)*3
			
			setResizableBoxSize(r, width, height)
		else
			r.resize = 0
		endif
	endif


	// draw caret
	ms = getMilliseconds()
	if r.caretFlash + 600 <= ms
		r.caretFlash = ms
		r.showCaret = 1 - r.showCaret
	endif
	
	if r.showCaret = 1
		c = 0xFFFFFF
		textOffsetX = getTextX(r.t)
		textOffsetY = getTextY(r.t)
		drawBox(textOffsetX+r.caretX, textOffsetY+r.caretY, textOffsetX+r.caretX+2, textOffsetY+r.caretY+22, c,c,c,c,1)
	endif
endfunction




function inside(px, py, x1, y1, x2, y2)
	
	if px > x1 and px < x2 and py > y1 and py < y2 then exitfunction 1
	
endfunction 0






function createResizableBox(img, chunkWidth, chunkHeight )
	
	n as ResizableBox
	
	n.TL = createSprite(img) : setSpriteAnimation(n.TL, chunkWidth, chunkHeight, 9)
	n.TM = cloneSprite(n.TL) : setSpriteFrame(n.TM, 2) : setSpritePosition(n.TM, chunkWidth, 0)
	n.TR = cloneSprite(n.TL) : setSpriteFrame(n.TR, 3) : setSpritePosition(n.TR, chunkWidth*2, 0)
	n.L  = cloneSprite(n.TL) : setSpriteFrame(n.L, 4)  : setSpritePosition(n.L, 0, chunkHeight)
	n.M  = cloneSprite(n.TL) : setSpriteFrame(n.M, 5)  : setSpritePosition(n.M, chunkWidth, chunkHeight)
	n.R  = cloneSprite(n.TL) : setSpriteFrame(n.R, 6)  : setSpritePosition(n.R, chunkWidth*2, chunkHeight)
	n.BL = cloneSprite(n.TL) : setSpriteFrame(n.BL, 7) : setSpritePosition(n.BL, 0, chunkHeight*2)
	n.BM = cloneSprite(n.TL) : setSpriteFrame(n.BM, 8) : setSpritePosition(n.BM, chunkWidth, chunkHeight*2)
	n.BR = cloneSprite(n.TL) : setSpriteFrame(n.BR, 9) : setSpritePosition(n.BR, chunkWidth*2, chunkHeight*2)
	
	//n.t = createText("kjlhf klsjda df dfdffddfdasdf asdfajkf asdflkha asdflsdljkasdfk dsaddf"+_N+_N+"askdjfhkjasdhf kausdhfasdf"+_N+"dshflkajsdfasdas")
t$ = "Sing, O goddess, the anger of Achilles son of Peleus, "+_N+"that brought countless ills upon the Achaeans. "
t$ = t$ +_N+_N+"Many a brave soul did it send hurrying down to Hades, "+_N+"and many a hero did it yield a prey to dogs and vultures, "
t$ = t$ +_N+"for so were the counsels of Jove fulfilled from the day on which the son of Atreus, "+_N+"king of men, and great Achilles, first fell out with one another."
	n.t = createText(t$)
	setTextSize(n.t, 22)
	//setTextColor(n.t, 217, 178, 0, 255)
	setTextColor(n.t, 0,0, 0, 255)
	setTextPosition(n.t, chunkWidth, chunkHeight)
	setTextScissor(n.t, chunkWidth, chunkHeight, chunkWidth*2, chunkHeight*2)
	
endfunction n



function setResizableBoxSize(r ref as ResizableBox, width, height)
	x = getSpriteX(r.TL)
	y = getSpriteY(r.TL)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	
	setSpriteSize(r.TM, width-w*2, h)   // upper middle
	setSpritePosition(r.TR, x+width-w, y) // upper right corner
	
	setSpritePosition(r.L, x, y+h)            // left side
	setSpriteSize(r.L, w, height-h*2)
	setSpriteSize(r.M, width-w*2, height-h*2) // body
	setSpritePosition(r.R, x+width-w, y+h)      // right side
	setSpriteSize(r.R, w, height-h*2)
	
	setSpritePosition(r.BL, x, y+height-h)       // bottom left
	setSpriteSize(r.BM, width-w*2, h)            // bottom middle
	setSpritePosition(r.BM, x+w, y+height-h)
	setSpritePosition(r.BR, x+width-w, y+height-h) // bottom right
	
	
	setTextPosition(r.t, x+w, y+h)
	setTextScissor(r.t, x+w, y+h, x+width-w, y+height-h)
	
endfunction



function setResizableBoxPosition(r ref as ResizableBox, x, y)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	width = getSpriteWidth(r.M)
	height = getSpriteHeight(r.M)
	
	setSpritePosition(r.TL, x, y)
	setSpritePosition(r.TM, x+w, y)
	setSpritePosition(r.TR, x+width+w, y)
	
	setSpritePosition(r.L, x, y+h)
	setSpritePosition(r.M, x+w, y+h)
	setSpritePosition(r.R, x+width+w, y+h)
	
	setSpritePosition(r.BL, x, y+height+h)
	setSpritePosition(r.BM, x+w, y+height+h)
	setSpritePosition(r.BR, x+width+w, y+height+h)

	setTextPosition(r.t, x, y)
	
endfunction

Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda
Pixel-Perfect Collision

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Laughing Coyote Software

6

Years of Service

User Offline

Joined: 30th Jun 2018

Playing: SKALD

Posted: 6th May 2025 22:23

Link

Oh wow you're just writing the code for me, thank you! AppGameKit Classic has a lot more functionality than I realized. I compiled the code and I can resize the box, but I can't get the text cursor to show when I click it.

I could pay you to $100 or something (along with name in credits) if you add in the scroll bars, edit functionality, and make sure it can save a plain text file with multiple lines. I want to distribute a script editor with both of my games for modders, so fixed width text is all I need.

I attached a couple script files so you can see what I want to use it for. They are both plain text that you can open with Notepad. "BSL" is Brigand Scripting Language and "WSL" is Warlord Scripting Language.

laughingcoyote.net

Back to top

Profile PM Email Website

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 7th May 2025 04:29 Edited at: 7th May 2025 04:30

Link

I do this for fun, not money. Got vertical scrolling. It's not quite perfect yet, needs a few tweaks. You can move the caret with left/right arrow keys and delete, enter, backspace all work. I wrote a different function for detecting the location of the caret when clicked, I think it's more efficient than my original method. If you had a lot of text, there's improvements that could be made for efficiency with the tradeoff of a little extra memory usage, but for the moment the added complexity isn't worth the benefit. Maybe someday I'll tweak it.

// Project: scrollbox 
// Created: 2025-05-06

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "scrollbox" )
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(0, 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

#CONSTANT _N = chr(10)+chr(13)

Type ResizableBox
	TL as integer
	TM as integer
	TR as integer
	L  as integer
	M  as integer
	R  as integer
	BL as integer
	BM as integer
	BR as integer
	resize as integer
	ox as integer
	oy as integer
	t as integer
	`caretX as integer
	`caretY as integer
	caretFlash as integer
	showCaret as integer
	caretIndex as integer
	vScrollT as integer
	vScrollM as integer
	vScrollB as integer
	vthumb as integer
	hthumb as integer
	vThumbPos as float
	hThumbPos as float
	dragThumb as integer
	tov as integer
EndType

mybox as ResizableBox

mybox = createResizableBox(loadImage("box.png"), 11, 11)

setResizableBoxScrollbars(mybox, loadImage("vtrack.png"), 6, 6)
setResizableBoxThumb(mybox, loadImage("thumb.png"))

setResizableBoxSize(mybox, 200, 300)

setResizableBoxPosition(mybox, 200,200)

`setResizableBoxSize(mybox, 300, 200)

c1 = random()*4294967295  : c2 = random()*4294967295  : c3 = random()*4294967295  : c4 = random()*4294967295 
drawBox(0,0,1024,768,c1, c2, c3, c4, 1)
q = createSprite(getImage(0, 0, 1024,768))
setSpriteDepth(q, 40)

c = 0xFF0000

do
	
	
    
    if doinput = 1
		// enter
		if getRawKeyPressed(13)
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+1, -1)
			setTextString(mybox.t, a$ + _N + b$)
			positionCaret(mybox, mybox.caretIndex + 2)
		endif
		
		if getCharBufferLength() > 0
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+1, -1)
			m$ = getCharBuffer()
			setTextString(mybox.t, a$ + m$ + b$)
			positionCaret(mybox, mybox.caretIndex+len(m$))
		endif
		
		// backspace
		if getRawKeyPressed(8) = 1 
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex-1)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+1, -1)
			setTextString(mybox.t, a$ + b$)
			positionCaret(mybox, mybox.caretIndex-1)
		endif
		
		// delete
		if getRawKeyPressed(46) = 1 
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+2, -1)
			setTextString(mybox.t, a$ + b$)
		endif
		
		// left/right arrows
		if getRawKeyPressed(37) = 1 then positionCaret(mybox, mybox.caretIndex-1)
		if getRawKeyPressed(39) = 1 then positionCaret(mybox, mybox.caretIndex+1)
		
		
	endif
	
    if getRawKeyPressed(13) = 1 and doinput = 0
		doinput = 1
		getCharBuffer()
		s$ = getTextString(mybox.t)
		`replaceString(s$, _N, "-", -1)
		setTextString(mybox.t, s$)
	endif

handleResizableBox(mybox)

Sync()
loop

function positionCaret(r ref as ResizableBox, n)
	r.caretIndex = n
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
endfunction

function setCaret2(r ref as ResizableBox)
	mx = getRawMouseX() - getTextX(r.t)
	my = getRawMouseY() - getTextY(r.t)
	
	r.caretIndex = 0
	s$ = getTextString(r.t)
	for i = 1 to len(s$)
		cx = GetTextCharX(r.t, i)
		cy = GetTextCharY(r.t, i)
		
		if my >= cy and my < cy+22
			if mx >= cx and mx < GetTextCharX(r.t, i+1)
				r.caretIndex = i
				exit
			else
				r.caretIndex = i
			endif
		endif
	next i
	if i = len(s$) then r.caretIndex = i

//if r.caretIndex > 0 then print(mid(s$, r.caretIndex, 1))
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
	
endfunction

/*
function setCaret(r ref as ResizableBox)

dummy = createText("")
	setTextVisible(dummy, 0)
	setTextSize(dummy, getTextSize(r.t))

textOffsetX = getSpriteX(r.TL) + getSpriteWidth(r.TL)
	textOffsetY = getSpriteY(r.TL) + getSpriteHeight(r.TL)

mx = getRawMouseX() - textOffsetX
	my = getRawMouseY() - textOffsetY
	
	totalRows = floor(getTextTotalHeight(r.t) / getTextSize(r.t))

row = floor(my / getTextSize(r.t))
	
	if row > totalRows-1 then row = totalRows-1
	if row < 0 then row = 0

s$ = getTextString(r.t)
	
	
	
	// Determines which row in the text based on _N (new line chars)
	// to place the caret
	if row >= totalRows
		A = len(s$)
		B = A
	else
	
		A = 0
		B = 0
		rows = 0
		for i = 1 to len(s$)-1
			if mid(s$, i, 2) = _N then inc rows
			
			if rows = row and A = 0
				A = i
			endif
			if A > 0 and B = 0 and rows = row+1
				B = i
				i = len(s$)
			endif
		next i
		
		if A = 0 then A = 1
		if B = 0 then B = len(s$)
	endif

l$ = mid(s$, A, B-A+1)
	
	caretX = 0
	
	t$ = "_"
	for i = 1 to len(l$)
		setTextString(dummy, mid(l$, 1, i))
		x = getTextTotalWidth(dummy)
		
		if x >= mx or i = len(l$)
			t$ = mid(l$, i, 1)
			caretX = x
			exit
		endif
	next i
	setTextString(dummy, l$)
	if row = 0 and mx <= 0 then caretX = 0
	if row = totalRows-1 and mx > getTextTotalWidth(dummy) then caretX = getTextTotalWidth(dummy)
	
	
	r.caretX = caretX
	r.caretY = row*getTextSize(r.t)
	
	deleteText(dummy)
	
	// always show caret when repositioning it
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
		
endfunction
*/

function setResizableBoxThumb(r ref as ResizableBox, img)
	r.vthumb = createSprite(img)
	setSpriteDepth(r.vthumb, 7)
	r.hthumb = cloneSprite(r.vthumb)
endfunction

function setResizableBoxScrollbars(r ref as ResizableBox, img, chunkWidth, chunkHeight)

x = getSpriteX(r.R)
	y = getSpriteY(r.R)
	
	r.vScrollT = createSprite(img)
	setSpriteDepth(r.vScrollT, 8)
	setSpriteAnimation(r.vScrollT, chunkWidth, chunkHeight, 3)
	setSpritePosition(r.vScrollT, x, y)

r.vScrollM = cloneSprite(r.vScrollT) : setSpriteFrame(r.vScrollM, 2) : setSpritePosition(r.vScrollM, x, y+chunkHeight)
	r.vScrollB = cloneSprite(r.vScrollT) : setSpriteFrame(r.vScrollB, 3) : setSpritePosition(r.vScrollB, x, y+chunkHeight*2)

endfunction

function handleResizableBox(r ref as ResizableBox)
	
	delta = 5
	x = getSpriteX(r.BR) + (getSpriteWidth(r.BR)/2)
	y = getSpriteY(r.BR) + (getSpriteHeight(r.BR)/2)
	
	mx = getRawMouseX()
	my = getRawMouseY()
	
	if inside(mx, my, x-delta, y-delta, x+delta, y+delta )
		
		if getRawMouseLeftPressed()
			r.resize = 1
			r.ox = x - mx + (getSpriteWidth(r.BR)/2)
			r.oy = y - my + (getSpriteHeight(r.BR)/2)
		endif
	else
		if GetTextHitTest(r.t, mx, my)
			if getRawMouseleftPressed()
				setCaret2(r)
			endif
		endif
	endif

if r.resize = 1
		if getRawMouseLeftState() = 1
			width = mx - getSpriteX(r.TL) + r.ox
			if width < getSpriteWidth(r.TL)*3 then width = getSpriteWidth(r.TL)*3
			
			height = my - getSpriteY(r.TL) + r.oy
			if height < getSpriteHeight(r.TL)*3 then height = getSpriteHeight(r.TL)*3
			
			setResizableBoxSize(r, width, height)
		else
			r.resize = 0
		endif
	endif

if inside(mx, my, getSpriteX(r.vthumb), getSpriteY(r.vthumb), getSpriteX(r.vthumb)+getSpriteWidth(r.vthumb), getSpriteY(r.vthumb)+getSpriteHeight(r.vthumb) )
		if getRawMouseLeftState() = 1 and r.dragThumb = 0
			r.dragThumb = 1
			r.oy = my - getSpriteY(r.vthumb)
		endif
	endif
	if r.dragThumb = 1
		 r.vThumbPos = ((getRawMouseY()+r.oy-getSpriteHeight(r.vthumb)/2) - getSpriteY(r.vScrollM)) / getSpriteHeight(r.vScrollM)
		 if r.vThumbPos < 0 then r.vThumbPos = 0
		 if r.vThumbPos > 1 then r.vThumbPos = 1
		 updateVThumbPosition(r)
		 
		 if getRawMouseLeftState() = 0
			 r.dragThumb = 0
		endif
	endif

// draw caret
	ms = getMilliseconds()
	if r.caretFlash + 600 <= ms
		r.caretFlash = ms
		r.showCaret = 1 - r.showCaret
	endif

if r.showCaret = 1
		if r.caretIndex = 0
			cx = 0
			cy = 0
		else
			cx = GetTextCharX(r.t, r.caretIndex)
			cy = GetTextCharY(r.t, r.caretIndex)
		endif
		
		c = 0xFFFFFF
		textOffsetX = getTextX(r.t)
		textOffsetY = getTextY(r.t)
		drawBox(textOffsetX+cx, textOffsetY+cy, textOffsetX+cx+2, textOffsetY+cy+22, c,c,c,c,1)
	endif
	
endfunction

function inside(px, py, x1, y1, x2, y2)
	
	if px > x1 and px < x2 and py > y1 and py < y2 then exitfunction 1
	
endfunction 0

function updateVThumbPosition(r ref as ResizableBox)
	
	x = getSpriteX(r.R) - getSpriteWidth(r.vthumb)/2
	y = getSpriteY(r.vScrollM)
	h = getSpriteHeight(r.vScrollM)
	ty = h*r.vThumbPos - getSpriteHeight(r.vthumb)/2
	
	setSpritePosition(r.vthumb, x, y+ty)
	
	
	th = getTextTotalHeight(r.t)
	mh = getSpriteHeight(r.M)
	extraVerticalView = th - mh
	if extraVerticalView < 0 then extraVerticalView = 0
	
	r.tov = extraVerticalView * r.vThumbPos
	
	
	setTextPosition(r.t, getSpriteX(r.TL)+getSpriteWidth(r.TL), getSpriteY(r.TL)+getSpriteHeight(r.TL)-r.tov)
	
endfunction

function createResizableBox(img, chunkWidth, chunkHeight )
	
	n as ResizableBox
	
	n.TL = createSprite(img) : setSpriteAnimation(n.TL, chunkWidth, chunkHeight, 9)
	n.TM = cloneSprite(n.TL) : setSpriteFrame(n.TM, 2) : setSpritePosition(n.TM, chunkWidth, 0)
	n.TR = cloneSprite(n.TL) : setSpriteFrame(n.TR, 3) : setSpritePosition(n.TR, chunkWidth*2, 0)
	n.L  = cloneSprite(n.TL) : setSpriteFrame(n.L, 4)  : setSpritePosition(n.L, 0, chunkHeight)
	n.M  = cloneSprite(n.TL) : setSpriteFrame(n.M, 5)  : setSpritePosition(n.M, chunkWidth, chunkHeight)
	n.R  = cloneSprite(n.TL) : setSpriteFrame(n.R, 6)  : setSpritePosition(n.R, chunkWidth*2, chunkHeight)
	n.BL = cloneSprite(n.TL) : setSpriteFrame(n.BL, 7) : setSpritePosition(n.BL, 0, chunkHeight*2)
	n.BM = cloneSprite(n.TL) : setSpriteFrame(n.BM, 8) : setSpritePosition(n.BM, chunkWidth, chunkHeight*2)
	n.BR = cloneSprite(n.TL) : setSpriteFrame(n.BR, 9) : setSpritePosition(n.BR, chunkWidth*2, chunkHeight*2)

t$ = "Sing, O goddess, the anger of Achilles son of Peleus, "+_N+"that brought countless ills upon the Achaeans. "
	t$ = t$ +_N+_N+"Many a brave soul did it send hurrying down to Hades, "+_N+"and many a hero did it yield a prey to dogs and vultures, "
	t$ = t$ +_N+"for so were the counsels of Jove fulfilled from the day on which the son of Atreus, "+_N+"king of men, and great Achilles, first fell out with one another."
	n.t = createText(t$)
	
	setTextSize(n.t, 22)
	//setTextColor(n.t, 217, 178, 0, 255)
	setTextColor(n.t, 0,0, 0, 255)
	setTextPosition(n.t, chunkWidth, chunkHeight)
	setTextScissor(n.t, chunkWidth, chunkHeight, chunkWidth*2, chunkHeight*2)
	
endfunction n

function setResizableBoxSize(r ref as ResizableBox, width, height)
	x = getSpriteX(r.TL)
	y = getSpriteY(r.TL)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	
	setSpriteSize(r.TM, width-w*2, h)   // upper middle
	setSpritePosition(r.TR, x+width-w, y) // upper right corner
	
	setSpritePosition(r.L, x, y+h)            // left side
	setSpriteSize(r.L, w, height-h*2)
	setSpriteSize(r.M, width-w*2, height-h*2) // body
	setSpritePosition(r.R, x+width-w, y+h)      // right side
	setSpriteSize(r.R, w, height-h*2)
	
	setSpritePosition(r.BL, x, y+height-h)       // bottom left
	setSpriteSize(r.BM, width-w*2, h)            // bottom middle
	setSpritePosition(r.BM, x+w, y+height-h)
	setSpritePosition(r.BR, x+width-w, y+height-h) // bottom right
	
	
	setTextPosition(r.t, x+w, y+h-r.tov)
	`setTextScissor(r.t, x+w, y+h, x+getSpriteWidth(r.M), y+getSpriteHeight(r.M))
	setTextScissor(r.t, x+w, y+h, x+getSpriteWidth(r.M), getSpriteY(r.BM))
	
	
	x = getSpriteX(r.R) - getSpriteWidth(r.vthumb)/2
	y = getSpriteY(r.R)
	sh = getSpriteHeight(r.vScrollT)
	sw = getSpriteWidth(r.vScrollT)
	
	trackHeight = height - h*2

setSpriteSize(r.vScrollM, sw, trackHeight-sh*2)
	
	ty = getSpriteHeight(r.M) * r.vThumbPos
	
	setSpritePosition(r.vthumb, x, y+ty)
	
	x = getSpriteX(r.R) - sw/2

setSpritePosition(r.vScrollT, x, y)
	setSpritePosition(r.vScrollM, x, y+sh)
	setSpritePosition(r.vScrollB, x, y+trackHeight-sh)
	
	
endfunction

function setResizableBoxPosition(r ref as ResizableBox, x, y)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	width = getSpriteWidth(r.M)
	height = getSpriteHeight(r.M)
	
	setSpritePosition(r.TL, x, y)
	setSpritePosition(r.TM, x+w, y)
	setSpritePosition(r.TR, x+width+w, y)
	
	setSpritePosition(r.L, x, y+h)
	setSpritePosition(r.M, x+w, y+h)
	setSpritePosition(r.R, x+width+w, y+h)
	
	setSpritePosition(r.BL, x, y+height+h)
	setSpritePosition(r.BM, x+w, y+height+h)
	setSpritePosition(r.BR, x+width+w, y+height+h)

setTextPosition(r.t, x+w, y+h-r.tov)
	setTextScissor(r.t, x+w, y+h, x+width, y+height)

x = getSpriteX(r.R) - getSpriteWidth(r.vthumb)/2
	y = getSpriteY(r.R)
	sh = getSpriteHeight(r.vScrollT)
	sw = getSpriteWidth(r.vScrollT)
	
	trackHeight = height - h*2

ty = getSpriteHeight(r.M) * r.vThumbPos
	
	setSpritePosition(r.vthumb, x, y+ty)

x = getSpriteX(r.R) - sw/2

setSpritePosition(r.vScrollT, x, y)
	setSpritePosition(r.vScrollM, x, y+sh)
	setSpritePosition(r.vScrollB, x, y+sh+getSpriteHeight(r.vScrollM))
	
	
	
	
endfunction

+ Code Snippet

// Project: scrollbox 
// Created: 2025-05-06

// show all errors
SetErrorMode(2)

// set window properties
SetWindowTitle( "scrollbox" )
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(0, 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


#CONSTANT _N = chr(10)+chr(13)



Type ResizableBox
	TL as integer
	TM as integer
	TR as integer
	L  as integer
	M  as integer
	R  as integer
	BL as integer
	BM as integer
	BR as integer
	resize as integer
	ox as integer
	oy as integer
	t as integer
	`caretX as integer
	`caretY as integer
	caretFlash as integer
	showCaret as integer
	caretIndex as integer
	vScrollT as integer
	vScrollM as integer
	vScrollB as integer
	vthumb as integer
	hthumb as integer
	vThumbPos as float
	hThumbPos as float
	dragThumb as integer
	tov as integer
EndType



mybox as ResizableBox

mybox = createResizableBox(loadImage("box.png"), 11, 11)

setResizableBoxScrollbars(mybox, loadImage("vtrack.png"), 6, 6)
setResizableBoxThumb(mybox, loadImage("thumb.png"))



setResizableBoxSize(mybox, 200, 300)


setResizableBoxPosition(mybox, 200,200)

`setResizableBoxSize(mybox, 300, 200)


c1 = random()*4294967295  : c2 = random()*4294967295  : c3 = random()*4294967295  : c4 = random()*4294967295 
drawBox(0,0,1024,768,c1, c2, c3, c4, 1)
q = createSprite(getImage(0, 0, 1024,768))
setSpriteDepth(q, 40)

c = 0xFF0000

do
	
	
    
    if doinput = 1
		// enter
		if getRawKeyPressed(13)
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+1, -1)
			setTextString(mybox.t, a$ + _N + b$)
			positionCaret(mybox, mybox.caretIndex + 2)
		endif
		
		if getCharBufferLength() > 0
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+1, -1)
			m$ = getCharBuffer()
			setTextString(mybox.t, a$ + m$ + b$)
			positionCaret(mybox, mybox.caretIndex+len(m$))
		endif
		
		// backspace
		if getRawKeyPressed(8) = 1 
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex-1)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+1, -1)
			setTextString(mybox.t, a$ + b$)
			positionCaret(mybox, mybox.caretIndex-1)
		endif
		
		// delete
		if getRawKeyPressed(46) = 1 
			a$ = mid(getTextString(mybox.t), 1, mybox.caretIndex)
			b$ = mid(getTextString(mybox.t), mybox.caretIndex+2, -1)
			setTextString(mybox.t, a$ + b$)
		endif
		
		// left/right arrows
		if getRawKeyPressed(37) = 1 then positionCaret(mybox, mybox.caretIndex-1)
		if getRawKeyPressed(39) = 1 then positionCaret(mybox, mybox.caretIndex+1)
		
		
	endif
	
    if getRawKeyPressed(13) = 1 and doinput = 0
		doinput = 1
		getCharBuffer()
		s$ = getTextString(mybox.t)
		`replaceString(s$, _N, "-", -1)
		setTextString(mybox.t, s$)
	endif


	handleResizableBox(mybox)
	
	

	
    Sync()
loop



function positionCaret(r ref as ResizableBox, n)
	r.caretIndex = n
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
endfunction


	
function setCaret2(r ref as ResizableBox)
	mx = getRawMouseX() - getTextX(r.t)
	my = getRawMouseY() - getTextY(r.t)
	
	r.caretIndex = 0
	s$ = getTextString(r.t)
	for i = 1 to len(s$)
		cx = GetTextCharX(r.t, i)
		cy = GetTextCharY(r.t, i)
		
		if my >= cy and my < cy+22
			if mx >= cx and mx < GetTextCharX(r.t, i+1)
				r.caretIndex = i
				exit
			else
				r.caretIndex = i
			endif
		endif
	next i
	if i = len(s$) then r.caretIndex = i
	

	//if r.caretIndex > 0 then print(mid(s$, r.caretIndex, 1))
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
	
endfunction

/*
function setCaret(r ref as ResizableBox)

	dummy = createText("")
	setTextVisible(dummy, 0)
	setTextSize(dummy, getTextSize(r.t))

	textOffsetX = getSpriteX(r.TL) + getSpriteWidth(r.TL)
	textOffsetY = getSpriteY(r.TL) + getSpriteHeight(r.TL)


	mx = getRawMouseX() - textOffsetX
	my = getRawMouseY() - textOffsetY
	
	totalRows = floor(getTextTotalHeight(r.t) / getTextSize(r.t))

	row = floor(my / getTextSize(r.t))
	
	if row > totalRows-1 then row = totalRows-1
	if row < 0 then row = 0

	s$ = getTextString(r.t)
	
	
	
	// Determines which row in the text based on _N (new line chars)
	// to place the caret
	if row >= totalRows
		A = len(s$)
		B = A
	else
	
		A = 0
		B = 0
		rows = 0
		for i = 1 to len(s$)-1
			if mid(s$, i, 2) = _N then inc rows
			
			if rows = row and A = 0
				A = i
			endif
			if A > 0 and B = 0 and rows = row+1
				B = i
				i = len(s$)
			endif
		next i
		
		if A = 0 then A = 1
		if B = 0 then B = len(s$)
	endif
		

	l$ = mid(s$, A, B-A+1)
	
	caretX = 0
	
	t$ = "_"
	for i = 1 to len(l$)
		setTextString(dummy, mid(l$, 1, i))
		x = getTextTotalWidth(dummy)
		
		if x >= mx or i = len(l$)
			t$ = mid(l$, i, 1)
			caretX = x
			exit
		endif
	next i
	setTextString(dummy, l$)
	if row = 0 and mx <= 0 then caretX = 0
	if row = totalRows-1 and mx > getTextTotalWidth(dummy) then caretX = getTextTotalWidth(dummy)
	
	
	r.caretX = caretX
	r.caretY = row*getTextSize(r.t)
	
	deleteText(dummy)
	
	// always show caret when repositioning it
	r.caretFlash = getMilliseconds()
	r.showCaret = 1
		
endfunction
*/


function setResizableBoxThumb(r ref as ResizableBox, img)
	r.vthumb = createSprite(img)
	setSpriteDepth(r.vthumb, 7)
	r.hthumb = cloneSprite(r.vthumb)
endfunction



function setResizableBoxScrollbars(r ref as ResizableBox, img, chunkWidth, chunkHeight)

	x = getSpriteX(r.R)
	y = getSpriteY(r.R)
	
	r.vScrollT = createSprite(img)
	setSpriteDepth(r.vScrollT, 8)
	setSpriteAnimation(r.vScrollT, chunkWidth, chunkHeight, 3)
	setSpritePosition(r.vScrollT, x, y)

	r.vScrollM = cloneSprite(r.vScrollT) : setSpriteFrame(r.vScrollM, 2) : setSpritePosition(r.vScrollM, x, y+chunkHeight)
	r.vScrollB = cloneSprite(r.vScrollT) : setSpriteFrame(r.vScrollB, 3) : setSpritePosition(r.vScrollB, x, y+chunkHeight*2)

endfunction




function handleResizableBox(r ref as ResizableBox)
	
	delta = 5
	x = getSpriteX(r.BR) + (getSpriteWidth(r.BR)/2)
	y = getSpriteY(r.BR) + (getSpriteHeight(r.BR)/2)
	
	mx = getRawMouseX()
	my = getRawMouseY()
	
	if inside(mx, my, x-delta, y-delta, x+delta, y+delta )
		
		if getRawMouseLeftPressed()
			r.resize = 1
			r.ox = x - mx + (getSpriteWidth(r.BR)/2)
			r.oy = y - my + (getSpriteHeight(r.BR)/2)
		endif
	else
		if GetTextHitTest(r.t, mx, my)
			if getRawMouseleftPressed()
				setCaret2(r)
			endif
		endif
	endif

	if r.resize = 1
		if getRawMouseLeftState() = 1
			width = mx - getSpriteX(r.TL) + r.ox
			if width < getSpriteWidth(r.TL)*3 then width = getSpriteWidth(r.TL)*3
			
			height = my - getSpriteY(r.TL) + r.oy
			if height < getSpriteHeight(r.TL)*3 then height = getSpriteHeight(r.TL)*3
			
			setResizableBoxSize(r, width, height)
		else
			r.resize = 0
		endif
	endif


	if inside(mx, my, getSpriteX(r.vthumb), getSpriteY(r.vthumb), getSpriteX(r.vthumb)+getSpriteWidth(r.vthumb), getSpriteY(r.vthumb)+getSpriteHeight(r.vthumb) )
		if getRawMouseLeftState() = 1 and r.dragThumb = 0
			r.dragThumb = 1
			r.oy = my - getSpriteY(r.vthumb)
		endif
	endif
	if r.dragThumb = 1
		 r.vThumbPos = ((getRawMouseY()+r.oy-getSpriteHeight(r.vthumb)/2) - getSpriteY(r.vScrollM)) / getSpriteHeight(r.vScrollM)
		 if r.vThumbPos < 0 then r.vThumbPos = 0
		 if r.vThumbPos > 1 then r.vThumbPos = 1
		 updateVThumbPosition(r)
		 
		 if getRawMouseLeftState() = 0
			 r.dragThumb = 0
		endif
	endif

	// draw caret
	ms = getMilliseconds()
	if r.caretFlash + 600 <= ms
		r.caretFlash = ms
		r.showCaret = 1 - r.showCaret
	endif

	if r.showCaret = 1
		if r.caretIndex = 0
			cx = 0
			cy = 0
		else
			cx = GetTextCharX(r.t, r.caretIndex)
			cy = GetTextCharY(r.t, r.caretIndex)
		endif
		
		c = 0xFFFFFF
		textOffsetX = getTextX(r.t)
		textOffsetY = getTextY(r.t)
		drawBox(textOffsetX+cx, textOffsetY+cy, textOffsetX+cx+2, textOffsetY+cy+22, c,c,c,c,1)
	endif
	
endfunction




function inside(px, py, x1, y1, x2, y2)
	
	if px > x1 and px < x2 and py > y1 and py < y2 then exitfunction 1
	
endfunction 0



function updateVThumbPosition(r ref as ResizableBox)
	
	x = getSpriteX(r.R) - getSpriteWidth(r.vthumb)/2
	y = getSpriteY(r.vScrollM)
	h = getSpriteHeight(r.vScrollM)
	ty = h*r.vThumbPos - getSpriteHeight(r.vthumb)/2
	
	setSpritePosition(r.vthumb, x, y+ty)
	
	
	th = getTextTotalHeight(r.t)
	mh = getSpriteHeight(r.M)
	extraVerticalView = th - mh
	if extraVerticalView < 0 then extraVerticalView = 0
	
	r.tov = extraVerticalView * r.vThumbPos
	
	
	setTextPosition(r.t, getSpriteX(r.TL)+getSpriteWidth(r.TL), getSpriteY(r.TL)+getSpriteHeight(r.TL)-r.tov)
	
endfunction


function createResizableBox(img, chunkWidth, chunkHeight )
	
	n as ResizableBox
	
	n.TL = createSprite(img) : setSpriteAnimation(n.TL, chunkWidth, chunkHeight, 9)
	n.TM = cloneSprite(n.TL) : setSpriteFrame(n.TM, 2) : setSpritePosition(n.TM, chunkWidth, 0)
	n.TR = cloneSprite(n.TL) : setSpriteFrame(n.TR, 3) : setSpritePosition(n.TR, chunkWidth*2, 0)
	n.L  = cloneSprite(n.TL) : setSpriteFrame(n.L, 4)  : setSpritePosition(n.L, 0, chunkHeight)
	n.M  = cloneSprite(n.TL) : setSpriteFrame(n.M, 5)  : setSpritePosition(n.M, chunkWidth, chunkHeight)
	n.R  = cloneSprite(n.TL) : setSpriteFrame(n.R, 6)  : setSpritePosition(n.R, chunkWidth*2, chunkHeight)
	n.BL = cloneSprite(n.TL) : setSpriteFrame(n.BL, 7) : setSpritePosition(n.BL, 0, chunkHeight*2)
	n.BM = cloneSprite(n.TL) : setSpriteFrame(n.BM, 8) : setSpritePosition(n.BM, chunkWidth, chunkHeight*2)
	n.BR = cloneSprite(n.TL) : setSpriteFrame(n.BR, 9) : setSpritePosition(n.BR, chunkWidth*2, chunkHeight*2)
	

	t$ = "Sing, O goddess, the anger of Achilles son of Peleus, "+_N+"that brought countless ills upon the Achaeans. "
	t$ = t$ +_N+_N+"Many a brave soul did it send hurrying down to Hades, "+_N+"and many a hero did it yield a prey to dogs and vultures, "
	t$ = t$ +_N+"for so were the counsels of Jove fulfilled from the day on which the son of Atreus, "+_N+"king of men, and great Achilles, first fell out with one another."
	n.t = createText(t$)
	
	setTextSize(n.t, 22)
	//setTextColor(n.t, 217, 178, 0, 255)
	setTextColor(n.t, 0,0, 0, 255)
	setTextPosition(n.t, chunkWidth, chunkHeight)
	setTextScissor(n.t, chunkWidth, chunkHeight, chunkWidth*2, chunkHeight*2)
	
endfunction n



function setResizableBoxSize(r ref as ResizableBox, width, height)
	x = getSpriteX(r.TL)
	y = getSpriteY(r.TL)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	
	setSpriteSize(r.TM, width-w*2, h)   // upper middle
	setSpritePosition(r.TR, x+width-w, y) // upper right corner
	
	setSpritePosition(r.L, x, y+h)            // left side
	setSpriteSize(r.L, w, height-h*2)
	setSpriteSize(r.M, width-w*2, height-h*2) // body
	setSpritePosition(r.R, x+width-w, y+h)      // right side
	setSpriteSize(r.R, w, height-h*2)
	
	setSpritePosition(r.BL, x, y+height-h)       // bottom left
	setSpriteSize(r.BM, width-w*2, h)            // bottom middle
	setSpritePosition(r.BM, x+w, y+height-h)
	setSpritePosition(r.BR, x+width-w, y+height-h) // bottom right
	
	
	setTextPosition(r.t, x+w, y+h-r.tov)
	`setTextScissor(r.t, x+w, y+h, x+getSpriteWidth(r.M), y+getSpriteHeight(r.M))
	setTextScissor(r.t, x+w, y+h, x+getSpriteWidth(r.M), getSpriteY(r.BM))
	
	
	x = getSpriteX(r.R) - getSpriteWidth(r.vthumb)/2
	y = getSpriteY(r.R)
	sh = getSpriteHeight(r.vScrollT)
	sw = getSpriteWidth(r.vScrollT)
	
	trackHeight = height - h*2

	setSpriteSize(r.vScrollM, sw, trackHeight-sh*2)
	
	ty = getSpriteHeight(r.M) * r.vThumbPos
	
	setSpritePosition(r.vthumb, x, y+ty)
	
	x = getSpriteX(r.R) - sw/2

	setSpritePosition(r.vScrollT, x, y)
	setSpritePosition(r.vScrollM, x, y+sh)
	setSpritePosition(r.vScrollB, x, y+trackHeight-sh)
	
	
endfunction



function setResizableBoxPosition(r ref as ResizableBox, x, y)
	w = getSpriteWidth(r.TL)
	h = getSpriteHeight(r.TL)
	width = getSpriteWidth(r.M)
	height = getSpriteHeight(r.M)
	
	setSpritePosition(r.TL, x, y)
	setSpritePosition(r.TM, x+w, y)
	setSpritePosition(r.TR, x+width+w, y)
	
	setSpritePosition(r.L, x, y+h)
	setSpritePosition(r.M, x+w, y+h)
	setSpritePosition(r.R, x+width+w, y+h)
	
	setSpritePosition(r.BL, x, y+height+h)
	setSpritePosition(r.BM, x+w, y+height+h)
	setSpritePosition(r.BR, x+width+w, y+height+h)

	setTextPosition(r.t, x+w, y+h-r.tov)
	setTextScissor(r.t, x+w, y+h, x+width, y+height)
	

	x = getSpriteX(r.R) - getSpriteWidth(r.vthumb)/2
	y = getSpriteY(r.R)
	sh = getSpriteHeight(r.vScrollT)
	sw = getSpriteWidth(r.vScrollT)
	
	trackHeight = height - h*2

	ty = getSpriteHeight(r.M) * r.vThumbPos
	
	setSpritePosition(r.vthumb, x, y+ty)

	
	x = getSpriteX(r.R) - sw/2

	setSpritePosition(r.vScrollT, x, y)
	setSpritePosition(r.vScrollM, x, y+sh)
	setSpritePosition(r.vScrollB, x, y+sh+getSpriteHeight(r.vScrollM))
	
	
	
	
endfunction

Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda
Pixel-Perfect Collision

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Back to top

Profile PM Email Website

Pebender

4

Years of Service

User Offline

Joined: 13th Feb 2021

Location:

Posted: 7th May 2025 05:01

Link

Hi and good morning,

shouldn´t it be easier to use a GUI for AppGameKit ?

Back to top

Profile PM

Laughing Coyote Software

6

Years of Service

User Offline

Joined: 30th Jun 2018

Playing: SKALD

Posted: 7th May 2025 05:31 Edited at: 7th May 2025 07:11

Link

The scroll bar works great, but I still can't get the text cursor (caret) to appear when I click for some reason. Do you think it's because I'm using AppGameKit Classic? Not sure what I'm missing.

I'll keep looking at it and get back to you when I figure it out, maybe in a couple days. Thank you so much.

P.S.: I am learning lots of new useful commands like GetTextCharX, which seems to be working.

EDIT: Just found out I gotta hit ENTER first, then I can position the cursor and edit the text, but the cursor still isn't appearing so I can't see current position. I'll figure it out eventually and post back here. Might be a couple days due to day job.

laughingcoyote.net

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Laughing Coyote Software

6

Years of Service

User Offline

Joined: 30th Jun 2018

Playing: SKALD

Posted: 7th May 2025 05:33

Link

Quote: "shouldn´t it be easier to use a GUI for AppGameKit ?"

I am thinking about buying AppGameKit Studio. If it includes an editable text box object with scroll bars so we don't have to do this, I will buy it immediately.

laughingcoyote.net

Back to top

Profile PM Email Website

Phaelax

DBPro Master

22

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 7th May 2025 13:03

Link

I'm using classic, not studio. You shouldn't need to hit enter to move the cursor with the mouse. With arrow keys yes, cause I was initially doing something different so keyboard input was ignored until you hit enter first.
The cursor is drawn and not a sprite, did you add anything in the code to change the draw order?

Quote: "shouldn´t it be easier to use a GUI for AppGameKit ?"

There really isn't one. Nothing built-in anyway, but somebody might've made a library.

Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda
Pixel-Perfect Collision

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds

Back to top

Profile PM Email Website

Laughing Coyote Software

6

Years of Service

User Offline

Joined: 30th Jun 2018

Playing: SKALD

Posted: 8th May 2025 05:23

Link

I didn't change the code at all, but for some reason before I can make any changes to the text, I have to press Enter (as well as click in the box before or after). Also the text cursor is never visible.

But this is more than enough code to go on, and I will definitely figure it out as soon as I have more time. I have to finish my main project by the end of the month, but then I will work on this app some more and post here again. Thank you, Phaelax.

laughingcoyote.net

Back to top

Profile PM Email Website

Laughing Coyote Software

6

Years of Service

User Offline

Joined: 30th Jun 2018

Playing: SKALD

Posted: 8th May 2025 08:18 Edited at: 8th May 2025 08:19

Link

Also, @Phaelax, can I put your name in the credits for the upcoming script editor and/or the games?

EDIT: Also, money is good because it means you don't have to work full-time and can spend more time coding your own stuff.

laughingcoyote.net

Back to top

Profile PM Email Website

Sorry your browser is not supported!

AppGameKit Studio Chat / Text Box with Scroll Bars

Attachments

Attachments