I'm working on an iOS educational where kids are drawing letters. The game mechanism is pretty simple and works OK. What I want to do is to show a drawing progress by turning the elapsed part into green thick line. See the image:
There are couple of solution I have in mind.
Mask over hidden path which transforms according to users touch position
Creating a new path on touchesMoved: by taking the original and adding a point to the user touch position, then stripping the rest
What would you choose or is there some better solution?
Note: I want to draw the green path precisely as the dashed one. By just drawing a path following the user movement would result in ugly line.
Thanks.
I would say your choice depends on whether the dashed line is also drawn (or drawable in all of its parts) with bezier curves.
If the dashed line is an image you show, probably solution 1 with an also drawn thick line and an adapted mask is easiest to do.
If the dashed line is already drawn as a bezier curve (or drawn by drawing several connected bezier curves), then solution 2 seems best to me. The tricky part would be to ensure you exactly follow the dashed line in this case (but I suppose you figured that already :-).
Related
I'm trying to add a black outline surrounding a sprite I have for a tank.
I've tried following every tutorial I could find on 2d outlines for sprites, however almost all of them were done using a previous unity version (I'm using 2021.1.3f1) and don't seem to have any of the problems I've been having.
After using Alpha subtraction on an offset copy of the sample texture (and multiplying by a color) I then try to add it back to the original sample texture. That's when things go wrong, no matter what I've tried it keeps either chopping off the right side of the sprite (I was trying to add the left outline first), or making the right side of the sprite the opposite color of what I'm putting on the left.
What I mean by "cutting off the right", those treads should be the same thickness on the right as on the left, it's like adding the outline to one side trimmed the other.
If it matters, the sprite is a PNG I got from Kenney and then modified in Krita.
For whatever reason, changing the color of the outline seems to also change how much is getting trimmed.
I've been banging my head against this for four hours now, any ideas or suggestions are greatly appreciated.
Update: After following One Full Time Equivalent's suggestion below I do get an outline surrounding the entire sprite, but now it's distorting the colors at the edges of the sprite as seen here:
After replacing Add with Blend
After your subtraction node, put in an Absolute node, otherwise you will subtract the right edge in the alpha channel (this is exactly what you observe right now). Always be aware that you can only see half the color space and negative channels can be tricky to deal with.
Im trying to figure out if there is a better way to draw a fading line then the method that I am currently using.
Currently to draw a fading line that can be moved around the screen I am using SKEmitterNodes. The SkEmitterNodes however are extremely CPU expensive. They have a birth rate of 300 to be able to maintain a thick line while being moved around the screen. Does anyone know of a better way to achieve this fading line drawing effect better?
The effect I am looking for is similar to the lines being drawn in Dark Echo. Here is a video. https://www.youtube.com/watch?v=tuOC8oTrFbM
Thanks,
Chris
If you are looking to fade a node's alpha property then you can use (SKAction *)fadeOutWithDuration:(NSTimeInterval)sec. This will gradually fade your node's alpha to zero in the specified time frame.
For proper memory management you should remove the node from parent if you no longer need it and the alpha has reached zero.
I've been looking into this for a while now, and as a beginner, I can't seem to get it done. What I want to do is take a simple gradient, and use it to stroke a CGPath. I tried using CGContextSetStokePattern with a PNG the width of the line and one pixel tall containing my desired gradient, but this tiles the pattern, whilst I'd rather have it drawn along the path like a brush. Closest thing I can think of would be the Styler from Pokémon Ranger.
Essentially, I'd like my line to start out one color in the middle and move towards another at the edges. There's probably a simple way of doing this, but I cannot for the life of me figure out how.
Much thanks to anyone who can help me. :)
There's no built-in support for stroking a path in that way.
You could try to fake it by stroking the path multiple times, with each stroke having a narrow line width than the prior stroke and a different color, and maybe different shadow settings too. Of course stroking it repeatedly will take longer than stroking it once.
I have been developing line drawing apps that produce lines such as these:
I really want to draw lines such as these:
I dont know what technique is used to produce the lines that look like brushwork.
I would appreciate advice, or redirection to a post that looks at this question. I've looked for an hour. I dont know the terminology to ask the right question..
Thanks
You have two problems you need to solve:
How to determine the width of the line to be drawn
Drawing the appropriate width line
Ideally you would want pressure information from the user's finger to know how wide the line should be. The harder the user presses, the fatter the line. However, the capacitive touch devices that run iOS don't have the ability to get this information. So your next option is to use some algorithm based on how fast the user is moving their finger on the screen. Slow movement may mean fatter lines and fast movement may mean thinner lines. Or the reverse, depends on what you want to achieve.
Drawing the appropriate width line has many options depending on whether your app is using OpenGL. Mainly, I would look at using a small anti-aliased circle image that is used to paint into a pixel buffer. Scale the image appropriately to paint sections of the line at varying widths. This part of your question has a lot of options so you may want to ask it as a separate question while also including details of whether you're using OpenGL, Core Graphics or something else.
I'm looking for a way to draw a curve (perhaps a parametric function?) into a CGContext
The best example which I can think of is the Adobe Ideas iPad application. As the user drags their finger, the application draws lines for every touchesMoved: using CGContextAddLineToPoint. After the user picks up their finger at touchesEnded:, the application does some math and replaces all of the lines with a single, smoothed curve.
What I have is a list of CGPoints, and I am looking to draw a smooth curve which follows those CGPoints into the CGContext.
Any assistance?
I'd advise creating a CGPathRef and use the CGPathAddQuadCurveToPoint method.
Hope this helps!