Draw curved lines with texture and glow with Unity - unity3d

I'm looking for an efficient way to draw curved lines and to make an object follow them in Unity.
I also need to draw them using a custom image and not a solid color.
And on top of that I would like to apply an outer glow to them, and not to the rest of the scene.
I don't ask for a copy/paste solution for each of these elements, I list them all to give some context.
I did something similar in a web app using the html5 canvas to draw text progressively. Here a gif showing you the render:
I only used small lines to draw what you see above. Here a very big letter with thinker lines so lines are more visible:
Of course it's not perfect, but the goal was to keep it simple and efficient. And spaces on the outer edges are not very visible in normal size.
This is used in an educational game working on mobile as a progressive app. In real world usage I attach a particles emitter to it for better effect :
And it runs smoothly even on low end devices.
I don't want to recreate this exact effect on Unity but the core functionality is very close.
Because of how I did it the first time, I thought about creating a big list of segments to draw manually, but unity may have better tools to create this kind of stuff, maybe working directly with bezier curves.
I a beginner in Unity so I don't really know what is the most efficient way to do it.
I looked at the line renderer which seemed (at first) to be a good choice but I'm a little bit worried about performances with a list of 500+ points (considering mobiles are a target).
Also, the glow I would like to add may impact on the technique to choose.
Do you have any advice or direction to give me?
Thank you very much.

Related

2D game development sprite/layout/terrain creation

ask a general question. There are few sprite resources and they are hardly liked by me. I would like to learn from the absolute scratch, such as how do I create a sprite from my idea.
Can I ask do I create it this way or what's the standard process?
1. draw it on white paper
2. scan it into a .png jpg etc
3. render it in photoshop
Thanks.
It's not quite right for Stack Overflow indeed, but I have a few suggestions anyway.
If you want to hand draw your art there are a few approaches. I started drawing the resources I needed on paper and scanning them, but this raises a couple of problems.
The first problem is that it can be hard to remove the white background properly leaving nasty bitty edges. This can be solved with time, practice and patience, and as far as I know there is no good way around this.
When using paper, it can be very hard to get clean areas of solid color. Pencils and the like leave and extremely distinctive paper texture, but approaches that give more solid colors using inks tend to go very blotchy.
The other problem is that if you want to animate these, or indeed reuse part of one sprite in another, you're left drawing bits of sprites - this lead me on to my currently favored methodology.
My recommendation would be to use ink onto acetate. You'll need to do some research into the best inks to use, but it means you can build the sprites in layers, much like animators used to do for film back in the day. You still have to solve the white background problem after scanning though, and if you pick the wrong ink it can be very easy to smudge your drawings - not ideal.
The other, more expensive alternative is to use a graphics tablet, and cut out the paper/acetate stage all together. This solves the white background problem, but some people find drawing with tablets oddly difficult - myself included.
Adobe software wise - I would personally use Illustrator while working with a graphics tablet, Photoshop for making adjustments to the resulting images, and Fireworks for building UI interface elements.
Hope this helps!
This is not really a coding question. As far as I know stackoverflow is only for technical problems. That said, I would recommend Illustrator to get started. There are some great tutorials out there. :)

How do I approach smooth line drawing such as the example below in ios 5/6?

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.

Dynamically create sprite images for Cocos2d-iPhone

I'm working on a platformer, and looking for a way to create a sprite for an arbitrarily sized platform. For example, I may know I have a platform that should appear 200 pixels wide by 32 pixels high, and, say, I have a texture of bricks that I can tile to fill that area. I may also want to draw a black border around the platform. Is this possible at all? Anyone have any ideas for how I might go about doing this? I could always try generating the image on the fly and building a sprite with that image, but I sincerely doubt (hope) that this isn't the most efficient way of doing something like this.
Cheers,
Alex
You can use tiled maps for the platform. It will require you to plan your textures a bit differently, but it will probably yield better results.
You can read more about tiled maps here.

iphone 2d drawing newbie question

I've been programming the iphone for a couple of months now and have 3 apps in the store already.
However, I have not done any kind of graphics programming in the platform.
Given that I'm planning on starting my 5th app (the 4th is under Apple's review) I wanted to ask for some pointers as to where to get information for this (been googling for a while but nothing matches what I'm looking for)
I need to create an App where I can 'drop' some shapes from a menu (a rectangle, circle, squares, and then some complex shapes) onto a main window.
the idea is that the user can drag them around. BUT, I want them to 'snap' to each other (kind of like in a CAD package where a circle has quadrants on the edges that snap to any other geometry entity in the drawing).
So if I had a circle on the left of the screen and a rectangle on the right and then I move the circle around, it would stop moving to the right If I hit the rectangles edges. Not completely stop but giving some sort of 'resistance' to the continuity of the movement.
Also, if I have several overlapping drawings, is there a way to 'divide' them (any overlapping becomes a shape on itself but is removed from any other shape composing the overlap)?
The reason for this is that I need to calculate the area of the drawing (along with other properties)
I'm thinking of CALayer 1, 2, 3,..., n on of top of the other, each one with a drawing (with CGPath?), that may or may not overlap the others.
Then I need to somehow obtain information of the 'projection' of all those on a single CALayer.
I'm clueless here.
Should I look into Quartz2D? is CALayer and CGPath enough for this?
this is not for a game. Just an engineering application I have in mind.
Any help is appreciated.
regards
dh
iPhone Application Programming Guide has a chapter on drawing.
You might get some ideas where to start by looking at the appropriate lectures from iPhone Application Programming lectures at Stanford. They include hight quality video lectures (filmed by Apple) over at iTunesU, slides and example source code.

Can this type of wiggle image deformation be done on iPhone without using openGL

I have a straight image and I want to deform it in a wave-like manner.
Original image:
straight texture http://img145.imageshack.us/img145/107/woodstraight.png
and I want it to look like this (except animated):
bent texture http://img145.imageshack.us/img145/8496/woodbent.png
I haven't tackled the learning curve of openGL yet so if I can do this with Core Animation it would be great.
Is this possible?
Unfortunately, I think this is a job for OpenGL. You could achieve the same affect in Quartz by slicing the image up vertically and drawing segments with different vertical offsets... but I don't think you'd be able to achieve good enough performance to animate it. (At least, with 1px or 2px wide slices)
You could also leave the image stationary, and use Quartz to animate a masking path that would create the waving edges. That probably wouldn't look too natural, though.
As far as I know, Core Animation on the iPhone isn't capable of doing this, either. On the Mac it comes with some more advanced filters, but I think you'd probably see a lot more stuff like this if the iPhone filters could do it :-)
OpenGL does have quite a learning curve, but here's what you'd want to do to achieve the effect: Create a flat rectangle in OpenGL with several verticies along it's length. Point the camera at the rectangle so that it appears flat. Then, use a sine() function of some sort to animate the verticies back and forth in place.
This approach is also used to achieve the rippling-water effect, and you might be able find an example or two of it.
Sorry to bring bad news :-) Hope that helps!