Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Does anyone have a working example of a paint-like app?

Author
Message
Naphier
13
Years of Service
User Offline
Joined: 2nd Oct 2010
Location: St Petersburg, Florida
Posted: 22nd Mar 2014 21:53
We're trying to make a game where the user will be able to draw on screen with their finger. We're simply placing sprites on every frame while the pointer is pressed. The problem is that at 60FPS there are pretty big gaps between calls to GetPointerX/Y()
Does anyone have a nice example of simple painting on screen that I could take a look at?
Are we going to have to extrapolate the points between each GetPointerX/Y call?
If so we'll need to do so much match for curves, maybe Clonkex's bezier curve tool will help with that for figuring out the calculations at least.

Thanks!

Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 23rd Mar 2014 09:40
hmm, i have only a Subscribe example.


AGK 108 (B)19 : Windows 8.1 Pro 64 Bit : AMD Radeon HD 6670

Attachments

Login to view attachments
The Daddy
15
Years of Service
User Offline
Joined: 13th Jan 2009
Location: Essex
Posted: 23rd Mar 2014 10:55
Just a question...why not set draw into a pixmap? This way only one sprite (the brush) is needed at a time?

www.bitmanip.com
All the juicy you could ever dream of!
Naphier
13
Years of Service
User Offline
Joined: 2nd Oct 2010
Location: St Petersburg, Florida
Posted: 23rd Mar 2014 16:58
@Markus - that will work. Thanks!!

@The Daddy - I've no idea how that would be accomplished with AGK.

easter bunny
11
Years of Service
User Offline
Joined: 20th Nov 2012
Playing: Dota 2
Posted: 24th Mar 2014 09:32 Edited at: 24th Mar 2014 09:35
Tornado made one:http://kirschapps.com/chalkandcrayon.html
I don't know how he did it though

The best way would be the way the 'real' drawing software work (PS, GIMP etc)
You'll need to have your canvas sprite and modify it's image using memblocks to write the brush positions to it.

Edit: And I should have read the other posts as well

Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 24th Mar 2014 10:02
Memblocks are the answer, especially if your going for a chalk effect, because that could just be randomly offsetting the drawing pixel.

A memblock for a 512x512 image would be setup like this:

Size=12+(512x512x4)
m=creatememblock(Size)
setmemblockinteger(m,0,512)
setmemblockinteger(m,4,512)
setmemblockinteger(m,8,32)

Which is a 512x512 image with 32 bit pixel data, or 4 bytes, giving RGB and alpha.

To set a pixel, you work out the position on the memblock, with (Y*WIDTH)+X*DEPTH

So...

Pos=12+(((y*512)+x)*4)

setmemblockbyte(m,pos,r)
setmemblockbyte(m,pos,g)
setmemblockbyte(m,pos,b)
setmemblockbyte(m,pos,a)


I would tend to make a function to draw a pixel onto a memblock, get the safety checks in there so you aren't using invalid pixel locations, then build on it. You'd be surprised how quickly you can update a memblock image, especially a humble 512x512 canvas. I use image memblocks for canvases, retro loading screens, pixelising transition effects... they're well worth looking into.

I am the one who knocks...
Naphier
13
Years of Service
User Offline
Joined: 2nd Oct 2010
Location: St Petersburg, Florida
Posted: 24th Mar 2014 16:58
We're not actually making a paint program, but a game that will allow you to draw maps on the screen. So there will be need for sprites over just altering the colors in a memblock. But the memblock idea is certainly interesting!
I wonder this:
Once you create the image from the memblock can you directly affect that memblock and the image displayed without reloading the image every time?

It seems like the interpolation would still be required because AppGameKit can only get the pointer location once per frame and it is very easy to move your finger in a way that there will be large gaps in the positioning. Markus' method works very nicely and seems fast enough. We'd need to work on the curve interpolation a bit, but if you run his example you'll see that it the straight lines in the curves are pretty minimal.

@easter bunny - tornado's web page is a nice example. It also looks like he uses some sort of interpolation.

Thanks for the help guys this is all very interesting.

Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 24th Mar 2014 18:39
When you convert a memblock to an image, the image is replaced completely - if you have a sprite with an image that is made from a memblock, then creating the image from the memblock will update the sprite automatically. A memblock created image is just the same as a loaded image, it can be applied to a sprite or object and zsorted however you need.

For interpolation, well you probably want to make a line function, so you can then draw between 2 points, rather than just drawing at the current point. In one test app, I have a chalkboard and I use point to point drawing, the image can even be stored as points then re-drawn later... like maybe you have the start of the map drawn automatically, and you want it to look just like the user drawn parts. It just depends on how far you need to go with it.

I am the one who knocks...
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 24th Mar 2014 20:44
Quote: "The problem is that at 60FPS there are pretty big gaps between calls to GetPointerX/Y()"


Draw a line from the last point to the current point.


Here's a snippet I made in DBP, but memblocks I believe have the same structure in AppGameKit so converting this would be easy. But I have a set of functions that draw directly to memblocks and it's how I built my iTunes clone without any external media.
http://forum.thegamecreators.com/?m=forum_view&t=207987&b=6

Naphier
13
Years of Service
User Offline
Joined: 2nd Oct 2010
Location: St Petersburg, Florida
Posted: 24th Mar 2014 21:22
Cool, thanks.
Drawing from point A to point B is OK, but won't look good for quickly swiped curves.

BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 24th Mar 2014 21:58 Edited at: 24th Mar 2014 22:00
I have an app where you can sign your name.
I use interpolated points, and "join the dots".
This is far more flexible, as you can change how the dots are joined, even after the drawing is complete. You can also undo the drawing because saving points takes up very little data, 2 floats per point.

Bezier curves are simple to implement. Look up "C-Spline", this is a really simple implementation. I made a track editor in DBP a while ago using C-Splines and 3D Poly tracks. While in edit mode, I reduced the number of points along the spline to 25% and let the user drag it around the screen, updating the mesh every frame. Once the mouse was unclicked, I redrew the track at full resolution in an instant. It illustrates how easy and adaptable splines are once you get the hang of it. (The jerkiness is ScreenCam, not the App).



Naphier
13
Years of Service
User Offline
Joined: 2nd Oct 2010
Location: St Petersburg, Florida
Posted: 24th Mar 2014 22:37

Login to post a reply

Server time is: 2024-05-04 22:38:33
Your offset time is: 2024-05-04 22:38:33