Draw movement path for sprite - need feedback

Author

Message

Timshark

17

Years of Service

User Offline

Joined: 30th Jun 2007

Location: Oslo, Norway

Posted: 24th Nov 2014 23:31 Edited at: 25th Nov 2014 00:04

Link

Hi people of agk!

I made a little program that makes a sprite move along the path you draw with your mouse.
press the mouse button and draw whatever line you want. When you release the button the sprite will follow the path you have drawn.

+ Code Snippet

// Draw Path

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

Type Drawpath
	x as float
	y as float
endtype

Path as Drawpath[]

CreateSprite(1,0)
SetSpriteSize(1,10,10)

do

SetSpritePosition(1,GetpointerX(),getPointerY())

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	sync()
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		sync()
	endif
	
	
	sync()
	if GetPointerState()=0 then finished=1
	until finished=1
Endif
	
	if path.length>-1
		for x=0 to path.length
			setspritePosition(1,path[x].x,path[x].y)
			sync()
		next
	endif
	
	path.length=-1 // Remove this and you will add to the path instead of making a new one
	
sync()
loop

nothing exceptional, but maybe useful for some - BUT I need something that I don´t know enough about:

What I need is to show the line you draw on the screen and then delete it when you release the mousebutton.
What is the easiest and most efficient way to do this? With "setrendertoimage"?

I never want what I know.

Back to top

Profile PM

easter bunny

12

Years of Service

User Offline

Joined: 20th Nov 2012

Playing: Dota 2

Posted: 25th Nov 2014 02:01 Edited at: 25th Nov 2014 02:12

Link

Simple method usnig drawline.

+ Code Snippet

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	sync()
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		`sync()  //What are these here for.....
	endif
	for k=2 to path.length
		DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
	next
	`sync()  //What are these here for.....
	if GetPointerState()=0 then finished=1
	until finished=1
Endif

Other ways could be creating a sprite at each position, storing the IDs in an array and deleting them afterwards, or trying something with memblocks (modifying the image of a sprite). Use your imagination

xD

edit: SetRenderToImage would be a lot simpler than memblocks

something like this would work [psuedo code]:

+ Code Snippet

asdf=CreateSprite(circle image)
base=CreateSprite(0) //base sprite

Do
   SetRenderToImage(base,0)
   SetSpritePosition(asdf,x,y)
   Render()
   SetRenderToScreen() 
Loop

although I probably wouldn't use this method, try experimenting with it and see if you can get it to work

EDIT:
Here's my complete modified version if your code (changes comented).

// Draw Path

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

Type Drawpath
	x as float
	y as float
endtype

Path as Drawpath[]

CreateSprite(1,0)
SetSpriteSize(1,10,10)

do

SetSpritePosition(1,GetpointerX()-5,getPointerY()-5) //-5 for centering sprite. Look nicer xD

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	`sync() //No idea what this is here for
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		`sync() //No idea what this is here for
	endif
	
	//DRAW LINE FOR PATH
	for k=2 to path.length
		DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
	next
	
	
	sync()
	if GetPointerState()=0 then finished=1
	until finished=1
Endif
	
	if path.length>-1
		for x=0 to path.length
			setspritePosition(1,path[x].x-5,path[x].y-5) //again, center sprie
			//FADE OUT LINE WITH MOVEMENT OF SPRITE
			for k=x+1 to path.length
				DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
			next
			sync()
		next
	endif
	
	path.length=-1 // Remove this and you will add to the path instead of making a new one
	
sync()
loop

+ Code Snippet

// Draw Path

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

Type Drawpath
	x as float
	y as float
endtype

Path as Drawpath[]

CreateSprite(1,0)
SetSpriteSize(1,10,10)

do

SetSpritePosition(1,GetpointerX()-5,getPointerY()-5) //-5 for centering sprite. Look nicer xD

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	`sync() //No idea what this is here for
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		`sync() //No idea what this is here for
	endif
	
	//DRAW LINE FOR PATH
	for k=2 to path.length
		DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
	next
	
	
	sync()
	if GetPointerState()=0 then finished=1
	until finished=1
Endif
	
	if path.length>-1
		for x=0 to path.length
			setspritePosition(1,path[x].x-5,path[x].y-5) //again, center sprie
			//FADE OUT LINE WITH MOVEMENT OF SPRITE
			for k=x+1 to path.length
				DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
			next
			sync()
		next
	endif
	
	path.length=-1 // Remove this and you will add to the path instead of making a new one
	
sync()
loop

Audacia Games - Latest WIP - AUTOMAYTE 2.1, AppGameKit one click deploy to Android
"When you've finished 90% of your game, you only have 90% left"

Back to top

Profile PM Email

Blendman

10

Years of Service

User Offline

Joined: 17th Feb 2014

Location: Arkeos

Posted: 25th Nov 2014 09:29 Edited at: 25th Nov 2014 11:48

Link

Hi

It's fun, I have made a same code like yours to add undo/redo system to my painting application (animatoon)

.

Here is the base code I use for Animatoon (see on showcase forum), only the part to draw a brush on a layer :

+ Code Snippet

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

asdf=CreateRenderImage(1024,768,0,0) 
// only nfor windows, for android, it would be : 
// asdf=CreateRenderImage(1024,1024,0,0) 
SetRenderToImage(asdf,0)
// clear the image
ClearScreen()	
Render()
SetRenderToScreen() 

// the brush
brush=CreateSprite(0)
Result = createsprite(asdf)
SetSpriteSize(result,1024,768)
SetSpriteTransparency(result,1)

Do
	x = GetPointerX()
	y = GetPointerY()
	if GetPointerState()
		if x <> oldx or y <> oldY
			SetRenderToImage(asdf,0)
			SetSpritePosition(brush,x,y)
			DrawSprite(brush)		
			//Render()
			
			SetSpriteImage(result,asdf)
			SetSpriteTransparency(result,1)
			SetRenderToScreen() 
			oldx = x
			oldy = y
		endif
	endif
	
	sync()
	
Loop

http://www.dracaena-studio.com

Back to top

Profile PM Website

Timshark

17

Years of Service

User Offline

Joined: 30th Jun 2007

Location: Oslo, Norway

Posted: 25th Nov 2014 11:03 Edited at: 25th Nov 2014 11:08

Link

@easter bunny

Thank you. I tried your snippet but nothing happens on my screen..?? My need wasn´t clear enough. What I need is to see the line AS you draw it, not after it has been drawn. Thats also the reason for the extra syncs you commented in the code.

@ Blendman
Thanks. This is close. Although, as I understand it, setrendertoimage() only works with power of 2 images. Thats the reason for the slight offset of the sprite in your program. The image stretches to fit the 1024,768 size. If you change the image and screen resolution to 512,512 there is no offset.

Now - how to do this with a screen resolution of 1024,768.....

I never want what I know.

Back to top

Profile PM

BatVink

Moderator

21

Years of Service

User Offline

Joined: 4th Apr 2003

Location: Gods own County, UK

Posted: 25th Nov 2014 11:22

Link

Somewhere(!) I have a project for writing signatures on the screen, like the delivery man asks you to do when receiving a parcel. If I can find it, I will post it.

In summary, I recorded the position of the pointer every time it moved 10 pixels from the previous one. Then I drew lines from each point to the next.

Doing it this way means you can "erase" the line by removing points from the array. You can erase forwards or backwards by removing from the front or back of the array. So you could erase your line from behind as the sprite travels along it.

Quidquid latine dictum sit, altum sonatur

Back to top

Profile PM Email

Blendman

10

Years of Service

User Offline

Joined: 17th Feb 2014

Location: Arkeos

Posted: 25th Nov 2014 11:52

Link

@timshark : in the code I have posted, you have the two versions. For android, you need a power of 2 image for renderimage, and for windows, you do what you want. With a 1024*768 screen, it's :

+ Code Snippet

Rimage=CreateRenderImage(1024,768,0,0) 
result = Creasprite(Rimage)

@Batvink : in this thread, I have tried to create an eraser : http://forum.thegamecreators.com/?m=forum_view&t=212671&b=41.
SetSpriteMask() is very slow, so this example isn't great for real time.

Matty_H has posted a shader example for an eraser, but I haven't tested it yet. If I can do an example which works fine for an eraser, I will post it in the same thread.

If you find another technic (erase the image and not delete the points on the path array ^^), you can post it too

.

http://www.dracaena-studio.com

Back to top

Profile PM Website

Timshark

17

Years of Service

User Offline

Joined: 30th Jun 2007

Location: Oslo, Norway

Posted: 25th Nov 2014 11:58 Edited at: 25th Nov 2014 12:12

Link

@Batvink

Sounds interesting.

@ Easter Bunny
I got your code to work now. What I had to do was to put back the first sync() you commented out. The one after:
x=getpointerX()
y=GetPointerY()

// Draw Path

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

Type Drawpath
	x as float
	y as float
endtype

Path as Drawpath[]

CreateSprite(1,0)
SetSpriteSize(1,10,10)

do

SetSpritePosition(1,GetpointerX()-5,getPointerY()-5) //-5 for centering sprite. Look nicer xD

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	sync() //No idea what this is here for - If I don`t have this. there will be no output and program locks up???
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		//sync() //No idea what this is here for
	endif
	
	//DRAW LINE FOR PATH
	for k=2 to path.length
		DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,255,255,255)
	next
	
	
	if GetPointerState()=0 then finished=1
	until finished=1
Endif
	
	if path.length>-1
		for x=0 to path.length
			setspritePosition(1,path[x].x-5,path[x].y-5) //again, center sprie
			//FADE OUT LINE WITH MOVEMENT OF SPRITE
			//for k=x+1 to path.length
				//DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
			//next
			sync()
		next
	endif
	
	path.length=-1 // Remove this and you will add to the path instead of making a new one
	
sync()
loop

+ Code Snippet

// Draw Path

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

Type Drawpath
	x as float
	y as float
endtype

Path as Drawpath[]

CreateSprite(1,0)
SetSpriteSize(1,10,10)

do

SetSpritePosition(1,GetpointerX()-5,getPointerY()-5) //-5 for centering sprite. Look nicer xD

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	sync() //No idea what this is here for - If I don`t have this. there will be no output and program locks up???
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		//sync() //No idea what this is here for
	endif
	
	//DRAW LINE FOR PATH
	for k=2 to path.length
		DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,255,255,255)
	next
	
	
	if GetPointerState()=0 then finished=1
	until finished=1
Endif
	
	if path.length>-1
		for x=0 to path.length
			setspritePosition(1,path[x].x-5,path[x].y-5) //again, center sprie
			//FADE OUT LINE WITH MOVEMENT OF SPRITE
			//for k=x+1 to path.length
				//DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
			//next
			sync()
		next
	endif
	
	path.length=-1 // Remove this and you will add to the path instead of making a new one
	
sync()
loop

I never want what I know.

Back to top

Profile PM

Blendman

10

Years of Service

User Offline

Joined: 17th Feb 2014

Location: Arkeos

Posted: 25th Nov 2014 12:27

Link

You need to put back this sync() because you are inside a loop (repeat / until finished = 1)

http://www.dracaena-studio.com

Back to top

Profile PM Website

Timshark

17

Years of Service

User Offline

Joined: 30th Jun 2007

Location: Oslo, Norway

Posted: 25th Nov 2014 16:39 Edited at: 25th Nov 2014 17:32

Link

@ Blendman

Quote: " in the code I have posted, you have the two versions. For android, you need a power of 2 image for renderimage, and for windows, you do what you want. With a 1024*768 screen, it's : Rimage=CreateRenderImage(1024,768,0,0)
result = Creasprite(Rimage)"

This was in your original example. the drawn line is still offset in tthe upper and lower part of the screen.

I run this on a Mac.

Quote: "You need to put back this sync() because you are inside a loop (repeat / until finished = 1)"

Yes of course. Strange how blind one can be sometimes. It was me who put it there in the first place

Thank you all for splendid help. I now have something that works. To put this in context: I needed this for the editor of my game to draw sprite paths for later use. Speed is not a big issue in the editor so I´m happy with what I have now. But if speed was important I think Blendmans setRenderToImage() solution would be faster.(??)

Anyway, this is my final solution for now:

// Draw Path

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

Type Drawpath
	x as float
	y as float
endtype

Path as Drawpath[]

CreateSprite(1,0)
SetSpriteSize(1,10,10)

do

SetSpritePosition(1,GetpointerX()-5,getPointerY()-5) //-5 for centering sprite. Look nicer xD

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	sync() //No idea what this is here for - If I don`t have this. there will be no output and program locks up???
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		//sync() //No idea what this is here for
	endif
	
	//DRAW LINE FOR PATH
	for k=2 to path.length
		DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,255,255,255)
	next
	
	
	if GetPointerState()=0 then finished=1
	until finished=1
Endif
	
	if path.length>-1
		for x=0 to path.length
			setspritePosition(1,path[x].x-5,path[x].y-5) //again, center sprie
			//FADE OUT LINE WITH MOVEMENT OF SPRITE
			for k=x+1 to path.length
				DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
			next
			sync()
		next
	endif
	
	path.length=-1 // Remove this and you will add to the path instead of making a new one
	
sync()
loop

+ Code Snippet

// Draw Path

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

Type Drawpath
	x as float
	y as float
endtype

Path as Drawpath[]

CreateSprite(1,0)
SetSpriteSize(1,10,10)

do

SetSpritePosition(1,GetpointerX()-5,getPointerY()-5) //-5 for centering sprite. Look nicer xD

if getPointerState()=1
	Finished=0
	repeat
	x=getpointerX()
	y=GetPointerY()
	sync() //No idea what this is here for - If I don`t have this. there will be no output and program locks up???
	if GetpointerX()<>X or getPOinterY()<>Y
		Path.length=Path.length+1
		path[Path.Length].x=GetPointerX()
		path[Path.Length].y=GetPointery()
		//sync() //No idea what this is here for
	endif
	
	//DRAW LINE FOR PATH
	for k=2 to path.length
		DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,255,255,255)
	next
	
	
	if GetPointerState()=0 then finished=1
	until finished=1
Endif
	
	if path.length>-1
		for x=0 to path.length
			setspritePosition(1,path[x].x-5,path[x].y-5) //again, center sprie
			//FADE OUT LINE WITH MOVEMENT OF SPRITE
			for k=x+1 to path.length
				DrawLine(path[k-1].x,path[k-1].y,path[k].x,path[k].y,100,100,100)
			next
			sync()
		next
	endif
	
	path.length=-1 // Remove this and you will add to the path instead of making a new one
	
sync()
loop

I never want what I know.

Back to top

Profile PM

Sorry your browser is not supported!

AppGameKit Classic Chat / Draw movement path for sprite - need feedback