0 Favourites

How do I create a painting/drawing application

  • Hey all,

    I have tried to create simple lines using the mouse/touch using examples from the forum & a Youtube tutorial, I'm not looking to create anything complex, really I just want to implement the following tools:

    Pencil

    Soft Round Brush (similar to photoshop default brush) for easy blending/tone building

    Pencil/Brush size control

    Opacity control

    Eraser tool

    Simple colour picker

    I have started to play around with drawing on the canvas but the two examples I have tried are pretty sketchy & both create horrible aliased lines & do not create smooth curved lines, which would just not be acceptable in a possible commercial product.

    I have had a look on the Scirra store, but the examples people are selling also have these issues, so are not an option.

    I have been looking at a plugin for Unity -

    If there is a similar plugin available for Construct or if anyone could could give me pointers to implementing the above tools in Construct, I would prefer to try & build in Construct. Has anyone created a drawing app in Construct 2?

    Example Capx's

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Managed to create smoother lines using the 'Arc' path via the Canvas plugin, its not perfect though, my lines are still straighter than I would like when drawing curves.

    I can probably work out how to add the rest of the tools I need, I don't think a soft round brush type tool is going to be possible though, unless you can maybe import & draw with a png of the brush?

  • Here's an example that goes a bit everywhere. It's meant to give ideas, and i'm not really going to pursue it further.

    It uses the paster object.

    A continuous brush is done by keeping track of the previous mouse position, then instead of drawing the brush at only the mouse position it lerps from the old mouse position to the new and draws the brush at every spot.

    The opacity is done by drawing to another object first at 100%. Then that is drawn with the opacity to the main canvas.

    Brush size is pretty easy. Coloring the brush done by applying a blend mode to the brush with a color.

    A color picker could be done with a canvas object with an image and using rgb at expressions to get color of a spot.

    Brush shape can be customized easily but soft brushes always come out as hard brushes. This probably can be fixed by using a shader to change how the brush strokes are blended together, but the paster plugin is breaking with shaders, so that's a no go.

    The capx also generates the brush shape but that was frivolous experiment. As opposed to many other capx this one isn't cleaned up at all.

  • Thanks for the information and example, appeciate it, especially when you are no longer involved with it's development. I'm at work at the moment so will check this out this evening. Cheers.

    Do you know if the Paster & Canvas plugin work on exported ios/android apps o.k?

  • Maybe you need something like this?

  • Thanks, yeah I checked the demo out, however the lines created are aliased, so not very good for my drawing/painting, although im sure anti-aliasing could be imnplemented to smooth them.

    Since my 1st post, I have since created a line using the 'Arc' via the Canvas plugin, which creates a relativley smooth line. I'll upload it later, it may be handy for some other users.

  • They should work but this hasn’t been tested by me.

    The canvas plugin will use high cpu with webgl o and you change it every frame. If you aren’t drawing to it every frame then it should be fine

    Paster was made to better utilize webgl so it is faster.

  • R0J0hound

    Is there any way to also erase parts of the Paster? Like with a eraser tool in a normal photo editing program. So far I don't think you can in the Paster plugin.

    Maybe if you save every paste action in an array including the brush size opacity color etc, and then when you erase, you just clear the whole paster, loop through the array and re do all the paste actions but also check which of the saved paste actions overlap with the position of the erase tool and just not carry out those paste actions. Of course this would probably be very hard to implement with complex brushes.

  • Paste an object with the destination out blend mode. That erases.

  • Use Google Translator Spanish To English

    Puedes probar a usar un plugin que se llama cavans yo creo que te serviria

  • Use Google Translator Spanish To English

    Puedes probar a usar un plugin que se llama cavans yo creo que te serviria

    FacuLNF

    How is this post relevant?

    I suspect spammer/spam bot. Happy to be proven wrong.

  • > Use Google Translator Spanish To English

    > Puedes probar a usar un plugin que se llama cavans yo creo que te serviria

    >

    FacuLNF

    How is this post relevant?

    I suspect spammer/spam bot. Happy to be proven wrong.

    When i start a new chat i put that, i am not a spammer or a bot

  • When i start a new chat i put that, i am not a spammer or a bot

    Your post was still irrelevant. It made no sense in this thread.

    If you make such posts then you will always attract mod attention, so please just don't.

    Thanks

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)