I am creating a vector drawing painting app and I have created a button that clears all the graphics (drawings) on the canvas. So basically, I just want to use pure white to "erase" all the drawings. Now I know there's other methods, but using this method is very important for future purposes. Now I want to clear the board of all graphics but the color,white, is this possible?
I feel like the best way to do this is to have two graphics you draw in, one for white, and one for everything else, that way you only clear the one. Not sure what you mean exactly since if the board is white, and you can already erase with white, what you are trying to accomplish by not clearing the white. Anyways add some more details if my suggestion doesn't work for you problem.
Related
My problem is that I have some objects I want to create a highlight around. Currently I am using glowfilter to do this, it works perfectly fine most of the time. But when I have partly transparent objects I get a problem, for example, a window, since the glass in the window is transparent the glowfilter will be visible through it.
Is there a solution on how to make a nice outline, without having to worry about transparency?
Thank you in advance!
OK there are two answers, one is easy and non-coding based, and the other requires the first answer plus coding and is non-trivial.
Easy answer: Don't use transparency. Flatten the source image, copy your part, and put a GlowFilter on it. Simple, and probably the way you should go.
Not easy answer: What you're seeing is the normal behavior for Bitmap filters. Instead, you will need to use a combination of at least two bitmaps, one without any interior transparency (same image part as in the Easy answer) that uses a GlowFilter with the knockout parameter set to true, and the other identical bitmap, without a filter, placed directly over it if you are intending to slide things between the device and the highlight. Doing this is way beyond the scope of a simple question, and you should research it if the Easy Answer doesn't do it.
Is it possible to add a glow to the outline of an Image? I know I can do this by adding an additional "glowed" version of the image and switching to it when desired, but since there are many different shapes in my game, I would prefer the glow to be done programmatically. How can I do this?
As #Metaphore mentioned, shaders are indeed the best option I found. I've succeeded in adding an outline to any desired image in my game by following this article and by getting crucial information from asking a follow up question.
The only way to do this is to use your own pixel shader when drawing this particular image.
You can find a lot of glow effect shaders on the net and there are may tutorials how to use them as well. You may check official LibGDX article on this topic https://github.com/libgdx/libgdx/wiki/Shaders
However, I'd not recommend you follow that way, because using different shaders for drawing single images will make you render cycle code much more complicated and less optimal. So either you will compromise on it, or just find easier way to achieve such behavior without shaders (I mean draw it statically somehow).
So I'm incredibly new to AS3, and barely know my way around.
I built a simple colouring book game, essentially changing some of the graphics of a tutorial, and replacing numbers and sizes to fit what I wanted to achieve. I then built a menu screen in a seperate scene and linked the two with code snippets and buttons to go back and forth.
The colour pickers are generated when the game is ran, however an issue I seem to be facing is that when I go back to my main menu, they are still there.
Can someone point me in the right direction as to how I can fix this? I'm sure it's a rather simple fix. I can provide the code from the tutorial if needed
I think you're right you need removechild this color to remove one color from stage... Maybe you need removechildren to remove all color, whin are on stage... Try this two way
I'm having trouble understand how DisplacementMapFilter works. Basically, I'm trying to create a revolving planet through a combination of fisheye/masking.
Also, how do I go about doing this via timeline? I'm not too familiar with coding within it, but this is more of an animation project than anything else, so classes are out of the question. Sorry for the lack of code -- I'm simply stuck.
As noted in the comments above, this probably only answers half the problem;
Generating a displacement map image isn't too difficult with the right tools. I'll assume you're using Photoshop, GIMP, Fireworks, or similar.
It's probably best to work on a 128x128 image or smaller with this method. Some editors have more specialised tools which let you work on pretty much any size of image, but this is a generic process that needs no special tools. You can always enlarge the end result, but the quality will begin to go down.
Start with a gradient fill. It should go from pure black on the left to dark red on the right (specifically 128,0,0). Add a vertical fill from black at the top to dark green at the bottom (specifically 0,128,0), and combine them with a LIGHTEN or ADD filter. You should now have an image which has black, red, green and yellow corners. Flatten it.
Copy this image to another layer / whatever the term-of-choice is for your editor. Apply whatever displacement filter you want to it (maybe a fish eye, maybe a manual smudge, maybe a perspective transform, anything)
Add a third layer between the two. Flood-fill it with dark yellow (128,128,0) and set it to ADD / ADDITION blend mode. Set the top layer to SUBTRACT / SUBTRACTION blend mode.
That's it. You should get a mostly yellow image which will function as a displacement map.
Update:
To use this in the example program (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DisplacementMapFilter.html#includeExamplesSummary), replace the createBitmapData function with this:
private function createBitmapData():BitmapData {
return myBitmapObject.bitmapData;
}
where myBitmapObject is the instance name (I think) of your displacement Bitmap. There are tidier ways of setting that up, but this is the easiest.
this.context.drawImage(myimage, 0, 0);
Putting the image on the canvas is pretty well covered all over the web.
But how do I remove it after it's there?
Canvas is an immediate drawing surface. This means that you execute a command on it (drawImage or fillRect) and it does that command, and it doesn't give a damn what has just done. There is no undoing of something.
You had a hard time searching for it because there's no such thing as "removing" for a Canvas. All it knows is that it has some pixels of some color from somewhere. It has no idea where.
To simplify a bit, there are generally two ways:
Clear the entire canvas, and draw everything all over again EXCEPT the one image you do not want drawn
Use two canvases, one that only has the image and one with all the other stuff. Clear this canvas with clearRect(0,0,width,height) and you're done.
You'll notice in 1. that you will probably have to start keeping track of the things that you draw on canvas if you want some of them selectively removed or repositioned. Instilling object persistence, or rather turning canvas from an immediate drawing surface to a retained drawing surface, is something that a lot of canvas libraries do. If you want to do it yourself, I've written a few tutorails to help people get started.
If you want to look into libraries, take a peek at easel.js. It's pretty learnable.
Option 1:
Draw a rectangle over it of the same color as the background.
Option 2 (works for non-trivial background, but slower):
Get the pixel data from the canvas before drawing the image, then redraw that pixel data to remove the image.
So I came up with a quick and easy way to clear my canvas. I just put my <canvas> tags in between <p> tags with an Id, then each time i needed my canvas cleared I just rerendered my <p> tags by changing the innerHTML, works like a charm.