I have been experimenting with draw nodes and so far i am getting the results i want but kind of using a trial and error way.
The main issue I have with draw nodes is that i can't seem to understand how the anchor point works.
Normally I would adjust the anchor point to the middle for example, and move a sprite somewhere, then the middle of the image of the sprite would be at the center exactly where the anchor point is.
However how does changing the anchor point really work in a draw node? Does it even work? (I am starting to believe it doesn't)
Does the anchor point affect the drawing? or just the final image? or nothing?
Right now when I draw something it seems to be drawn as if i was in a canvas drawing around (0,0) and moving the anchor point doesn't seem to do anything (regardless of if i move it before or after drawing)
As far as I remember DrawNode is subclass of Node. And Node, by default does not have a size. If node doesn't have a size (technically it's 0x0) anchor points won't work, because for example center of 0x0 object it's just the same point. If you want to center your node you have to specify it's size using setContentSize method.
Related
I need to draw a line that moves from left to right over the screen. Currently I'm just calling .clearRect() everytime, and draw it again, 1 pixel further. However, another possibility would be to draw the canvas once, and move it's CSS position across the screen.
Which scenario would be preferred for performance and why?
Moving, or "transforming" is always going to be much faster.
You're on the right track, but this is already built into Canvas. Here's a link on how to accomplish this:
Canvas Transform Tutorial
Canvas Transform
I am building a survival horror like game and am hoping to make a very nice camera system to compliment the mechanics. Part of this is the fact that you will be able to crouch down and cover your face. The camera work I want to do with this is to zoom in to the character in order to constrain the view for the player as well.
The current MC structure that I have is:
GameMaster
>
Spawner (this is for the player and all enemies)
>
Player
The issue I'm having is that scaling the GameMaster (which is where side scrolling and other global game effects are happening) causes the centering of the camera to offset based on how far away the player is from 0,0.
You can see the issue clearly in this video. The red arrows point to the 0,0.
On this stackoverflow question the answer says to make a container for everything and center the containers 0,0 over the target that you want to zoom around. This poses a challenge for me because I would then have to get proper coordinates for an object nested 4 MC's in. I'm also unsure what that will then do for my current side scrolling camera.
Is there a way that I could mathematically figure out the offset when the character ducks? It seems like a viable option because you can't move until you let go of crouch and the camera zooms out.
If not, is the container MC a good option or is it just one of those "you gotta do what you gotta do." type situations?
[Added]
I also see something about Transform Matrices or something. Is that something that would work? I know NOTHING about them but I assume they are CPU heavy and wouldn't be a good option for a mechanic prevalent throughout the whole game.
[Added 2]
ALSO, I want to do a rotation camera effect that suffers from the same 0,0 issue. Blatantly showing up as the player and level rotating around some far off pivot point.
If a Transform Matrix can swiftly and functionally offset the 0,0 to the players location so that I can do all the camera effects and alterations. I think that may be the best way to go.
----Close to Conclusion----
In regards to Vespers answer. Would I then be able to tween the resulting transform?
If so then that completely answers my entire problem. If not, I have no clue how to get the result I want.
I think the container is the cleanest solution. Since it'll be centered on the player, rotations and scaling will work normally. You mention getting the coordinates for the nested MC is hard, but there is a built-in function to do exactly that: localToGlobal()
To get the player position in global coordinates, just do player.localToGlobal(new Point(0, 0)). This should return the Player's center in global coordinates. If your main container is not in global coordinates (because it's nested inside another transformed MC, for example), you can use the opposite function on the container to convert from global to local:
container.globalToLocal(player.localToGlobal(new Point(0, 0)))
Now you just need to center the container. That could also be used to simulate the camera movement. If you update the container position at every frame, it'll give the effect of the camera following the player.
Edit: Is there any way to adjust the stage size and position from inside flash?
Hey Im making a flashgame right now, its a 2D game with 2charakters. You can move them right now trought the level as you want to, but my problem is, its only one fourth of the whole level displayed, so I thought about making a camera that moves along with the player.
Ussualy I would put all the level content into a container and move the container, but my problem is, that I have 2charakters which can move and the camera has to focus on both of them otherwise the second player cant see what he is doing. So I thought about scaling the background and the characters up at the same time to create a zoom in zoom out effect depending on the distance between the players, but scaling the charakters up is pretty complicated because the charakter does not only consists out of one movieclip.
Put the level content along with the players in a container. Continue doing all the usual logic needed for the game, but instead of moving the level content; move the characters.
Then for each frame, adjust the scale and position of the new outer container based on the position of the two players.
I have a basic paint application on a canvas, and I want to make a drawing-border and by that create a stencil. In other words, I want to make a shape, and then I want the user to be able to draw only inside it, even when he tries to draw outside.
Do you have any idea how can i do it?
thanks
This can be achieved by making a clipping region. The basic idea is that there is a path on the canvas that all drawing is constrained to.
Make the shape, and instead of calling stroke() or fill(), call clip()
If you don't quite get how clipping regions work, there are a few examples around.
I have a small project I am working on HTML5 canvas and I wanted to get some ideas how to accomplish it. I have built an outline of a tree using all the canvas line functions. lineTo, bezierCurveTo, quadracticCurve, etc. I have attached a picture of the outline. Now, what I would like to do is have some code that fills a percent of this outline. Kind of like a progress bar starting from the bottom. Does anyone have ideas on how to accomplish this?
Thanks
Rather than thinking of the problem as having to fill a percentage of the inside of the tree, why not split the image into two layers, the tree and the "fill", and then draw one over the other. See my image below for a quick and dirty example.
Of course, you will need to obscure the rest of the "fill" layer, so you will need to fill the outside of the tree shape white, but this should be fairly easy as you already have the path worked out. In essence, your path would instead of being the outside edge of a a tree shape, become the inside edge of a tree shaped hole!