I have a little problem. I have 2D image of roulette wheel on the stage and used 3D rotation tool to get a little 3D effect (Image 1). Now I want to rotate it on it's Z axis so that I can get spining effect of wheel. I tried to use rotationZ += ... but it doesn't rotate it the way I want. I saw one tool in flash toolbar called "Global transform" (Image 2). When I click it I see transformation lines for image (Image 3), that I need for rotation, the blue line is one I need (Z axis). But I don't know how to use that kind of transformation via code. I don't even know if that is local or global rotation. I hope you understand me, maybe pictures will help you! Thanks!
HERE IS DROPBOX LINK FOR IMAGES --> Dropbox Images
What you are trying to do is simply an issue of nesting elements and applying effects on them in certain ways.
To accomplish the rotation as you want, you'll want to create your roulette wheel image in 2D as if you were looking at from a birds eye view. I highly recommend creating this graphic in vector format. Import this graphic into Flash and turn it into a movieclip. For arguments sake, I'm going to give this movieclip an instance name of wheel so it is easy for us to follow along with these instructions. Now, within the wheel instance, you'll want to apply a rotation to the roulette wheel. You can accomplish this either by using a Motion tween on the timeline, but the best way would probably be to use a programmatic approach so you can randomize the rotation in some way.
Now, place the 'wheel' instance on the stage and use the 3D Rotation Tool and rotate the wheel on it's X axis, this will make the wheel look like one in your image.
Now if you have performed the rotation within the wheel instance properly, you will have your spinning wheel.
I've created a sample of what you want with the following files using Flash CC 2014 that you can download here:
FLA File
Sample compiled SWF FILE
There is actually some math involved in understanding 3D transformations - including rotations - and how they combine with each other.
If your are interested in further explanations, and have a bit of math background, have a look at the theory
otherwise, the first thing you should remember is that rotation/scaling/translations may be composed (combined) but that the order is very important. rotationX, rotationY, rotationZ are sort of "coordinates" that enable to describe any orientation in the vector space, like x,y,z describe any position. But they are not sufficient to allow to do any rotation around any axis from any current orientation.
In your case, what you want is to combine a rotation around it's own local z (blue) axis, which means before the initial rotation you have already applied. ex:
roulette.transform.matrix3D.prependRotation(10, new Vector3D(0,0,1));
where 10 would be the angle you chose for the rotation, and the pivot of your object would be the pivot of the rotation (ohterwise, specify your own pivot by passing an additional Vector3D
To complete the picture, if you use appendRotation() instead of prependRotation(), you will rotate your object in the z axis of the world (global) coordinates (after it's current trnasformation).
You may also as already suggested create a Symbol to use as a container, and rotate you object inside it's container, but messing with Matrix3D will give you more control in the end, often with just one line of code like in this case.
Related
Ok lets say i have image and i want to rotate it along Y axis. Problem is i need to move my Y axis so rotation would be proper. I do my work in pure as3 code so this trick needs to be done in pure as3 code, so no flash drawing tools available :( .
here some images that may help you
LATEST EDIT: problem is solved with ez then i found that as3 actually also have 4x4 matrices that called Matrix3D in documentation , so now it possible to do all 3d rotations.
Answering your question without a code example is very hard. As I can see, your local position of the figure is somewhat different from what you intend it to be to rotate as desired.
Generally spoken, there are two potential issues to solve:
You may adjust your image's x and y values so that the image is always drawn as desired. So you need to add/remove an offsetX and offsetY variable to all your drawings of your image to fine-adjust it's local position.
If you use a rotation function with a matrix you should beware of the correct sequence. Rotation applies differently either when you apply translation before or after it.
Hope this may help you. If you want a more specific answer, you need to provide some code exampple.
I know it is not possible to add eventhandlers to specific circles or rectangles in canvas. But there are some nice frameworks like EaselJS, KineticJS, Paper.js, Fabric.js that support the eventhandling on specific elements.
Can someone explain me how do they work?
I think there are only two solutions.
1. You create for each element a new canvas region and put them on each other. In this way you can give each region an event handler.
2. You have only one canvas region and one event handler. In this way you have to do complex mathematical calculations to find out if a specific element was clicked. If you have only circles or rectangles, this solution might be easy. But if you have path with lots of curves, this solution is quite difficult.
I don't want to use the libraries. So it would be nice, if someone can help me.
Here's a BRIEF summary of how canvas drawing libraries work
An unaltered canvas is just a big bitmap. Once you draw shapes on the canvas, they are unaccessible, forgotten pixels.
Canvas drawing libraries store all your shapes into “retained” objects. Each shape object has sufficient information about itself to allow the drawing library to redraw it whenever necessary.
The canvas drawing libraries are the "controllers" for objects. The libraries have the algorithms necessary to track, manipulate and redraw all shape objects as necessary.
The following information is retained about every shape object:
Basic identification
ID,
Shape name
Parent or Container
Inherent properties of the shape:
Rectangular shapes( rect, image, text) know width and height.
Circular shapes (circles, elipses, regular polygons, stars) know radius and sidecount.
Lines know length.
Curved shapes (arcs, beziers, paths) know anchor points and control points.
Text also knows…well, the text!
Images also know their pixel data (usually stored in javascript Image objects)
Transformational information:
Starting X/Y coordinate
Translations—accumulated movements off the starting coordinate.
Rotations—accumulated rotations of this shape (usually in radians).
Scalings—accumulated resizings
Other transforms (less common) are skews and warps
Layering information—the current z-index
Styling information:
StrokeColor,
StrokeWidth,
FillColor,
Opacity,
isVisible,
lineCaps,
cornerRadius
Tracking abilities:
Bounding box—the smallest rectangle that completely contains this shape
This is used for “hit testing” to see if the mouse is inside this object (for selecting and dragging)
If you don't want to use a library, you may find my answer in this thread helpful. As markE says once the canvas is written to there is no way of tracking that data (unless you care to loop through each individual pixel and test its colour; though that is only really useful for pixel level collision detection).
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.
I have to use Flash CS3, so I can't use the properties rotationX, roationY and rotationZ.
I have a movieclip, that looks like this. It is now flat, no 3D rotation or shearing
But what I want is that this movieclip has a rotationX, or that it is a bit in perspective like this:
As I said, I can't use rotationX, so I have been playing around with Matrix.
But I can not get it right.
Here is how I try to do it
myMC.transform.matrix = new
Matrix(1,0.15,0.35, 1, 0, 0);
And this is the result
Can you help me to get the matrix right, or is there another way?
Thank you,
Vincent
Make your life easier and just download a 3D engine for flash 9:
http://away3d.com/downloads
Either that or you can modify your CS3 installation to produce SWF files that target flash 10+
Sorry, rotationX and rotationY are not affine transforms (they obviously do not preserve parallelism between lines), so they cannot be represented by matrix multiplication in 2D space. It is, however, affine in 3D space (where the non-preservation of parallel lines is an apparent effect of the 2D projection, not of the rotation)
i believe what you are trying to do is to get a correct affine transformation matrix.
FYR (Transformation Matrix) http://en.wikipedia.org/wiki/Transformation_matrix
Edits
For more information about 3D transforms and their matrices,
Here, see if this applies.
http://www.cosc.brocku.ca/Offerings/3P98/course/lectures/2d_3d_xforms/
Edits 2
A blog post about 3D transform in CS3 and CS4.
3d Rotation the easy way: Buy Flash
CS4 uggh! I’m still using CS3 and only
for my Flash software. My illustrator,
photoshop, premiere, and aftereffects
are still at the lowly level of CS2
and for economic reasons, I’m stuck w/
my outdated software configuration for
awhile. But if you’re not in my boat
or on the same sea as my boat,
consider buying the latest, greatest
CS4 Flash to make 3D manipulation
inherent in flash display objects.
Yep, inherent, built in, easy.
In Flash CS3 and below, a display
object (i.e. sprite or movieclip) only
recognizes one rotation property
(rotation: Indicates the rotation of
the DisplayObject instance, in
degrees, from its original
orientation, which is usually the
upper left, corner or 0,0). This
property only rotates objects in the
2D flat space of the Flash stage. To
make 3D work in this flash, one must
“fake” it with math. Lots of math,
Points, lines, fills, trig, arrays,
and sometimes Matrices. Yippee kayae!
In Flash CS4 and above (as of writing
there is no above), a display object
(i.e. sprite or movieclip) recognizes
four (4) rotation properties. Holy
Cow! Yeah, four rotation properties:
rotation: Same as in CS3. 2D rotation.
rotationX: spin that shit around the X
axis of the stage, i.e. vertical
flipping. rotationY: spin it around
the Y axis of the stage, i.e.
horizontal flipping. rotationZ: spin,
baby spin o’er the Z axis of the
stage. As far as I’m concerned, a spin
around the Z axis is the same as
rotation (unless, for some reason, the
Z axis does not cross through the
orientation point of the object).
[http://actionscription.wordpress.com/2009/03/12/3d-rotation/]
I have an image of a basic game map. Think of it as just horizontal and vertical walls which can't be crossed. How can I go from a png image of the walls to something in code easily?
The hard way is pretty straight forward... it's just if I change the image map I would like an easy way to translate that to code.
Thanks!
edit: The map is not tile-based. It's top down 2D.
I dabble in video games, and I personally would not want the hassle of checking the boundaries of pictures on the map. Wouldn't it be cleaner if these walls were objects that just happened to have an image property (or something like it)? The image would display, but the object would have well defined coordinates and a function could decide whether an object was hit every time the player moved.
I need more details.
Is your game tile based? Is it 3d?
If its tile based, you could downsample your image to the tile resolution and then do a 1:1 conversion with each pixel representing a tile.
I suggest writing a script that takes each individual pixel and determines if it represents part of a wall or not (ie black or white). Then, code your game so that walls are built from individual little block, represented by the pixels. Shouldn't be TOO hard...
If you don't need to precompute anything using the map info. You can just check in runtime logic using getPixel(x,y) like function.
Well, i can see two cases with two different "best solution" depending on where your graphic comes from:
Your graphics is tiled, and thus you can easily "recognize" a block because it's using the same graphics as other blocks and all you would have to do is a program that, when given a list of "blocking tiles" and a map can produce a "collision map" by comparing each tile with tiles in the "blocking list".
Your graphics is just some graphics (e.g. it could be a picture, or some CG graphics) and you don't expect pixels for a block to be the same as pixels from another block. You could still try to apply an "edge detection" algorithm on your picture, but my guess is then that you should rather split your picture in a BG layer and a FG layer so that the FG layer has a pre-defined color (or alpha=0) and test pixels against that color to define whether things are blocking or not.
You don't have much blocking shapes, but they are usually complex (polygons, ellipses) and would be unefficient to render using a bitmap of the world or to pack as "tile attributes". This is typically the case for point-and-click adventure games, for instance. In that case, you're probably to create path that match your boundaries with a vector drawing program and dig for a library that does polygon intersection or bezier collisions.
Good luck and have fun.