fancy lines test

Monkey Forums/Monkey Programming/fancy lines test

Paul - Taiphoz(Posted 2013) [#1]
Hay guys.

Working on a little class to render out lines made up of three sprites, a start bit, middle bit and end bit, the results can be seen here.

Html5
http://www.cruel-gaming.com/Beta/cSpriteLine/html5/MonkeyGame.html
Flash
http://www.cruel-gaming.com/Beta/cSpriteLine/flash/MonkeyGame.html

Code : http://code.google.com/p/c-sprite-line/

Instructions are on the bottom in the debug output, I would love to know how many lines you can have while moving the mouse around before your frame rate starts to drop bellow 59/60

thanks in advance.


Paul - Taiphoz(Posted 2013) [#2]
I can get about 640 in chrome.. would it be worth me shoving up a flash version as well ?

      Chrome   Firefox
Html5 640      280
Flash 82       74


EDIT :: wow the flash results SUCK BALLS>.. OH to remove lines in flash hit SPACE.. as the right click opens the context window.


Paul - Taiphoz(Posted 2013) [#3]
Anyone know why there is such a huge difference between the two results?


Dima(Posted 2013) [#4]
I can do 354 lines in Chrome before dropping in frame rate. Radeon 6870 card but I suspect we're at the mercy of the browser and it's Canvas implementation. Someone on this forum, a fellow Russian I believe, has a WebGL Mojo module that transparently plugs in.

You would probably get much better performance only using a single image instead of 3 for each line. The end caps could be just part of that image.


Dima(Posted 2013) [#5]
Try at least 3 different browsers with both Flash and HTML5 - both targets rely on browser/plugin implementation and I suspect you will get different results with everything. WebGL is probably the only solution for consistent results.


Paul - Taiphoz(Posted 2013) [#6]
Yeah I need results from as many people as possible so that I can descide what I wana do next.

This is a test of how good or bad drawing these kinds of lines will work in my main project, at the moment all my art is pre-drawn sprites, but if this turns out to be fast enough with a reasonable amount of lines then I might use this and render all my levels and game objects dynamically.

would allow me to do some cool funky things with my game actors, like blowing them up, or making them grow or shrink or who knows what else.


Dima(Posted 2013) [#7]
You should probably at the very least resort to a single image per line or else you're tripling the number of drawing calls, and those are the biggest bottle neck. The rest is up to the API - you would get the highest performance in HTML5 without using SetColor, SetAplha, and Rotations, color being the biggest culprit I believe.

One idea is to use CreateImage() and WritePixels() to procedurally generate your line image with the color baked in then draw with color 255. Considering these images don't have to be large and are stretched with the line, you could pre-generate a whole bunch of different colors and bypass SetColor.


Neuro(Posted 2013) [#8]
I get 526 on HTML5 version.


DGuy(Posted 2013) [#9]
On Mac:
Chrome HTML5 265
Chrome Flash 25

Safari HTML5 310
Safari Flash 35



muddy_shoes(Posted 2013) [#10]
My framerate starts dropping with <30 lines in Chrome HTML5 on my laptop. It looks like you've built in debug mode though, which doesn't help.


Tibit(Posted 2013) [#11]
644 in Chrome - still at 59 fps
1 in Flash - starts 54 fps

Flash usually don't have any good fillrate. Meaning that slowness is dependent to the number of pixels that change since the last frame.

Try the exact same app, but draw a black rect over the bottom half of the screen and the fps in flash should double, even tough you are doing the same + a rect.


Paul - Taiphoz(Posted 2013) [#12]
made a few changes, pressing M switches between drawing a line (scribbling) and then drawing random LINES to the mouse.

think I also removed the start and end caps from the lines. so they might look a bit jaggy where the angles are a little steep.


ElectricBoogaloo(Posted 2013) [#13]
Got to about 350 before FPS dropped to 45.
Safari on an iPad 3rd gen!
Got about the same result on an iPod Touch, (new/Tall display)

The Nexus 7 only got up to 150 before it started chugging. Poor little nexus!


Paul - Taiphoz(Posted 2013) [#14]
150 is still fairly good depending on the implementation and what the lines are being used for.


AdamRedwoods(Posted 2013) [#15]
1200 html5 win7 chrome

you probably want to WritePixel for something like this, then your only slowdown is writing to the single image. Use Bresenham's line algorithm.
http://rosettacode.org/wiki/Bitmap/Bresenham's_line_algorithm


Paul - Taiphoz(Posted 2013) [#16]
the whole point of this is that with either 1 or 3 very small images you can create a nice looking, themed or custom bitmap line to be used in your project, for example using png's and their alpha to create an alphed line with glow.

Start

Middle

End

like this.



This example is using a 1 pixel wide middle, but with this system you can have middle segments that are wider allowing you to cram in some extra detail.

Doing something like that with writepixel would be a nightmare, and creating new types of line would be a whole other project where as with this system its as simple as creating a 1 pixel wide png.


Grey Alien(Posted 2013) [#17]
This is pretty cool but I see cracks on the lines when they are curved.


Paul - Taiphoz(Posted 2013) [#18]
yeah, I moved the center point so their not as bad as its turning from the middle point of the line and not the corner but its still visible if you do sharp turns, to be honest for the implementation I was planning those would not have been an issue.

probably a number of ways to solve that, but when factoring in alpha I think it might get problematic with overlaying segments creating bright spots on the line as opposed to being treating as a single solid line.

it's something to look at tho.


Paul - Taiphoz(Posted 2013) [#19]
Actually thinking about it for a second, new line segments are deplayed every I think 5 or 10 pixels, and provided that the timer has ticked over, I could simply add a new condition that it would drop a new segment if the angle from the last lines end point to the new lines end point is beyond say 10 degree's this would remove all of the cracks.

but as I said before with alpha in mind it could create some hot spots, might be worth trying both options tho.