I'm working on an application that needs to key out the background from an image taken by a webcam in front of a green screen. I figured this would be a very common task, but to my surprise i'm having trouble finding code samples for anything more advanced than a simple color-threshold and those do not quite cut it quality wise.
I've found a few pdf-papers, but I'm having trouble translating these rather high concepts into actual implementations, I'd much rather look at some code.
Focus here is on quality, having a second or more of processing time is not a problem.
I will be using actionscript 3 (and possibly pixel bender) to implement this, but I'll happily look at other languages aswell.
If you have any good samples doing this, the whole process or parts, please do post them!
If you have no high requirement for chromakey quality, maybe this(http://www.quasimondo.com/archives/000615.php) will be okay.
But for high quality video( i.e, 720*576 video ), it is not easy job.
I have spent a lot time to research high quality chromakey algorithm, finally I have figured out one algorithm(implemented with c/c++) for real time video,which can be used in none-linear video editing system as plugin or standalone application.
I put some demo static images to show at voicethread.com websites, everyone can comment with text, or voice there.
http://voicethread.com/share/801789/
Related
For the past year I have been working on an isometric city builder. So far I have not used any framework apart from a loose PureMVC clone.
I have heard of Starling but only recently have I played with it.
From my research, the performance boost is fenomenal, but this forces me to manage my resource a lot tighter.
At the moment, I am exporting building animations one building at a time, in ~16 frames/pngs. These are cropped, resized and exported in Photoshop by a script and then imported in Flash, then exported as a swf, to be loaded / preloaded / postloaded on demand.
The frames are way too big to make a spritesheet with them, per building. I believe its called an atlas.
These pngs are then blited between lock() and unlock(). After the buildings + actors walking around are sorted, that is.
I am unsure if just using starling.Movieclip for the buildings, where instead of loading the pngs, I would build a MovieClip symbol with its frames. So bliting wouldn't even be necessary. Unless adding bliting on top of Starling would improve performance even more. That would allow fatter features such as particles effects, maybe some lighting.
Google isn't offering me a strait answer, thus I am asking here.
Google isn't offering a straight answer because there isn't such. It depends very very much on what you've done, how much knowledge you've got and what are your goals.
Using Starling gives benefits as well as drawbacks. Your idea of resources will change totally. If you really have enormous amount of assets, then putting them into GPU will be really slow process. You must start from there - learn what Starling does, how resources are managed with it and what you need to change in order to make the transition between the two.
If this is not that hard and time consuming task, you will have some performance optimization. BUT again it depends on your current code. Your current code is really important in this situation as if it's perfectly optimized your gain won't be that much (but commonly would still be).
If you need to switch between graphics regularly or you need to have dynamic assets (as images for example) you must keep in mind that uploading to GPU is the slowest part when talking about Starling and Stage3D.
So again, there is not a straight answer. You must think of GPU memory and limit, GPU upload time, as well as assets management. You also need to think of the way your code is built and if you are going to have any impact if you make the switch (if your code heavily depends on the MovieClip like structure, with all that frames and things) - it will be hard for you. One of the toughest things I fought with Stage3D was the UI implementation - there is almost only Feathers UI which will take you a few weeks to get along with.
On the other hand, Starling performs pretty well, especially on mobile devices. I was able to maintain a stable 45fps on a heavy UI app with a lot of dynamic loading content and multiple screens on an old iPhone 4S, which I find great. Latest mobile devices top at 60fps.
It's up to you to decide, but I'll advise you to have some experimental long-lasting project to test with, and then start applying this approach to your regular projects. I've done the dive to use it in a regular very tightened deadline project, and it was a nightmare. Everything worked out great, but I thought I would have a heart attack - the switch is not that easy :)
I would suggest using DMT for rasterizing your vector assets into Straling sprites at runtime, and it'll also keep your DisplayTree! meaning that you'll still have the parent/child relations that you had in your Flash Assets.
DMT will not duplicate assets, and will rasterize the vectors into texture atlases only one time (Cache is saved)
you can find it here: https://github.com/XTDStudios/DMT
I'm a beginner in programming world, never touch any programming language before. But last 3 days I decide to try make a flash game, I looked some tutorial about AS3, try it, yes I understand a little bit. But I'm still confused about this:
How do I know or to decide what codes I write first, what next? example: I want to add a hero, then a enemy, then a tiles, then a background, event listener.
Is it okay if I write code randomly, example: first I add enemy, then add tiles, add background, then add hero, etc?
What is the best way to completely learn all AS3 codes, especially about flash game dev?
I'm now in frustration mode, so I decide to learn from you all who have mastered AS3.
Check out this guide by Michael James Williams. I was in the same situation as you, and that guide helped me a lot. It goes through a lot of the basics and does a good job of explaining each step.
To answer some of your questions, the order in which you code stuff doesn't matter too much. You can always go back and adjust your old code, and you'll definitely end up doing that at some point.
For learning AS3 syntax, just look through some examples and tutorials, and don't be afraid to read the official AS3 docs. They might be intimidating at first, but once you start learning some of the terminology, they're very helpful.
you can try some video tutorials like these
http://www.lynda.com/ActionScript-tutorials/AS3-language-fundamentals/123492/129625-4.html
http://www.lynda.com/Flash-tutorials/Building-Flash-Games-Starling/98951-2.html?srchtrk=index:1%0Alinktypeid:2%0Aq:flash%2Bgames%0Apage:1%0As:relevance%0Asa:true%0Aproducttypeid:2
If you're frustrated NOW, are you sure that you're ready to invest a couple of YEARS in becoming half-good with Actionscript? You'll have to like learning from your mistakes (an excellent way to learn, actually), because you will make thousands of them and they will cost you thousands of hours!
Do NOT write 'randomly' unless you want to greatly lengthen your time to mastery. Everything you do should have a purpose. I would start (if I were starting again) by giving myself a series of the smallest challenges: make an object appear; make it disappear; make it appear in one second from now; make it appear when I tap a key or click my mouse; make it move across the screen; make it move back; make it follow my mouse... etc.
There are many hundreds of basic programmatic elements like these that will add to your growing grasp of logic, data-structures and language. There are usually many ways to accomplish the same task -- learn and practice all of them.
Luckily, the Internet is full of good tutorials and references to Actionscript, and some decent forums like this one where you can get help.
I know this is king of old but someone might still find this useful.
I think that if you are serious about game development and also want to learn some techniques that are independent of the platform (Flash/AS3 in this case) you should use a framework.
For Flash the best game framework is the Starling along with Feather for UI.
They run on Stage3D which means that run on the GPU not the CPU which make them very fast.
With Starling you can also create mobile games that run in AIR so I think it really is something to consider.
On hsharma.com you can find a free video tutorial that goes through everything you need to know to get starting with game development so it should answer the question on how to create enemies, backgrounds, etc.
Hope this helps someone.
I've found lots of information about measuring load time for pages and quite a bit about profiling FPS performance of interactive applications, but this is something slightly different than that.
Say I have a chart rendered in SVG and every click I make causes the chart to render slightly differently. I want to get a sense of the complete time elapsed between the click and the point in time that the pixels on the screen actually change. Is there a way to do this?
Measuring the Javascript time is straight forward but that doesn't take into consideration any of the time the browser spends doing any layout, flow, paint, etc.
I know that Chrome timeline view shows a ton of good information about this, which is great for digging into issues but not so great for taking measurements because the tool itself affects performance and, more importantly, it's Chrome only. I was hoping there was a browser independent technique that might work. Something akin to how the Navigation Performance API works for page load times.
you may consider using capturing hdmi capturing hardware (just google for it) or a high speed camera to create a video, which could be analyzed offline.
http://www.webpagetest.org/ supports capturing using software only, but I guess it would be too slow for what you want to measure.
everyone. This isn't as much of an specific technical question as it is about asking for some guidance on which steps should I follow.
The thing is I haven't worked with Flash in general for over a year and I'm very rusty, but now, here at work, I need to create an app that takes a picture, detects the face in said picture and then applies a certain animation effect. For example a slap to the face, so the detected face would shake from side-to-side or maybe something similar to the Fatify app, where it takes the pic, makes the person look fat and then you can touch it anywhere to see it animate. You get the idea.
So, my main problem is, that even after doing some extensive research, I'm still not clear on what the best method is or which would be the best tools to accomplish the animation effects on the detected face. I have read about Joa Ebert's Image Processing Library, but that seems to have been forgotten for quite a while and seeing as I have been out of the loop from the world of Flash for quite a while, I don't know if there's any novelty that could be what I'm looking for. I have also looked at countless image manipulation blog posts and tutorials, but most of it is simple stuff that doesn't really apply to what I need.
So, in summary, I would really apreciate it if anyone could point me to resources or topics that I should look into, that might prove useful for what I need to accomplish.
Thanks.
You should be using OpenCV. The library is quite extensive and has been ported to operate in many languages. OpenCV has an api for facial tracking. We've used it in our studio before for simple face tracking games.
These links are kind of dated, but should put you on the right track.
http://www.francois-tarlier.com/blog/marilena-opencv-port-to-actionscript-3-as3-flash/
http://www.marcpelland.com/2009/03/16/face-detection-opencv-in-as3/
So I was looking at the facebook HTML with firebug, and I chanced upon this image
and came to the conclusion that facebook uses this large image (with tricky image positioning code) rather than many small ones for its graphical elements. Is this more efficient than storing many small images?
Can anybody give any clues as to why facebook would do this.
These are called CSS sprites, and yes, they're more efficient - the user only has to download one file, which reduces the number of HTTP requests to load the page. See this page for more info.
The problem with the pro-performance viewpoint is that it always seems to present the "Why" (performance), often without the "How", and never "Why Not".
CSS Sprites do have a positive impact on performance, for reasons that other posters here have gone into in detail. However, they do have a downside: maintainability; removing, changing, and particularly resizing images becomes more difficult - mostly because of the alterations that need to be made to the background-position-riddled stylesheet along with every change to the size of a sprite, or to the shape of the map.
I think it's a minority view, but I firmly believe that maintainability concerns should outweigh performance concerns in the vast majority of cases. If the performance is necessary, then go ahead, but be aware of the cost.
That said, the performance impact is massive - particularly when you're using rollovers and want to avoid that effect you get when you mouseover an image then the browser goes away to request the rollover. It's appropriate to refactor your images into a sprite map once your requirements have settled down - particularly if your site is going to be under heavy traffic (and certainly the big examples people have been pulling out - facebook, amazon, yahoo - all fit that profile).
There are a few cases where you can use them with basically no cost. Any time you're slicing an image, using a single image and background-position tags is probably cheaper. Any time you've got a standard set of icons - especially if they're of uniform size and unlikely to change. Plus, of course, any time when the performance really matters, and you've got the budget to cover the maintenance.
If at all possible, use a tool and document your use of it so that whoever has to maintain your sprites knows about it. http://csssprites.org/ is the only tool I've looked into in any detail, but http://spriteme.org/ looks seriously awesome.
The technique is dubbed "css sprites".
See:
What are the advantages of using CSS
Sprites in web applications?
Performance of css sprites
How do CSS sprites speed up a web
site?
Since other users have answered this already, here's how to do it, and another way is here.
Opening connections is more costly than simply continuing a transfer. Similarly, the browser only needs to cache one file instead of hundreds.
yet another resource: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
One of the major benefits of CSS sprites is that it add virtually 0 server overhead and is all calculated client side. A huge gain for no server side performance hit.
Simple answer, you only have to 'fetch' one image file and it is 'cut' for different views, if you used multiple images that would be multiple files you would need to download, which simply would equate into additional time to download everything.
Cutting up the large image into 'sprites' makes one HTTP request and provides a no flicker approach as well to 'onmouseover' elements (if you reuse the same large image for a mouse over effect).
Css Sprites tecnique is a method for reducing the number of image requests using background position.
Best Practices for Speeding Up Your Web Site
CSS Sprites: Image Slicing’s Kiss of Death
Google also does it - I've written a blog post on it here: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/
But the essence of it is that you make a single http request for one big image, rather than 20 small http requests.
If you watch a http request, they spend more time waiting to start downloading than actually downloading, so it's much faster to do it in one hit - chunky, not chatty!