We are getting closer and closer to generating an actual cubic panorama. In case you just jumped on in from elsewhere, I’m working on a project in which I have to create a cubic panorama with hotspots that light up and it has to be in AS2, so this is my journal on the way there. In the previous post we learned how to split a plane into multiple segments to reduce the texture distortion errors. We also mentioned that perspective is not the same as distortion. I played around a bit with perspective in the GridRider intermezzo post, which I will convert into a full game as soon as I’m done with these tutorials. After yet another short night with caffeine and Volbeat to keep me awake, it’s 10 AM on a rainy Sunday morning, good excuse to post the next bit!
Another fun thing you can do using triangles. Hacked together but performs ok for AS2, runs at about 20% CPU. Click to start and turn the volume up!
You can download the DistortedPlane class and examples here Distortedplane (1306 downloads) .
In the previous example we saw how to render arbitrary triangles, and we showed an example of how to reduce the equations in right-angled cases. In this post we are going to look into rendering a plane. We will do so without any perspective correction for the z-axis, and as mentioned previously distortion is not perspective. (A good treaty on this can be found here http://zehfernando.com/2010/the-best-drawplane-distortimage-method-ever/.
In the first post in this series, I discussed and explained matrix transforms and how they could be used to map a bitmap into an arbitrarily drawn triangle. However we saw that if we are ever going to render larger planes in 3d, mapping a single bitmap onto a single rectangle (or 2 triangles) will not cut it, since in order to counter the gruesome texture distortion created by the affine transforms, we will have to subdivide a plane into smaller planes. Note that this is still not perspective correct, it is simply a distorted bitmap with less texture distortion through subdivision. A grid that respects the perspective or rather z-depth of the vertices is up for another post.
Subdividing the plane means we end up with smaller rectangles, that contain smaller pieces of the texture (bitmap). So we are no longer mapping a complete bitmap to a rectangle or triangle, but just pieces of that bitmap.
Looking back at the first post, we derived the transform for a complete bitmap fill using the following formulas:
In the previous post we talked about affine transforms and splitting rectangles into triangles. We only talked about one of the simplest scenarios: mapping a complete rectangular area of a bitmap into a drawn triangle/rectangle. The formulas for mapping an arbitrary triangle of a source bitmap into an arbitraty drawn triangle are a bit more involved and we will discuss them in the next post. But even with two triangles we can create something simple to create a feel of 3d. Far from being a correct implementation, this example experiments with a 3d butterfly based on two sources images (the front and back of a butterfly).
The ‘model’ exists of two triangles, one for each wing, which are folded and rotated using a couple of sinuses. The resulting coords are used to generate the transform matrices for the bitmap fills on the wings. Which bitmap is used to fill a triangle is decided using a cross product of the wing vectors, to check whether we are seeing the top or the bottom of the wing. Since there is no real perspective it is sometimes hard to see which side is in front, but nonetheless this opens up fun possibilities for a children’s game where you can draw a butterfly and then have it fly off your paper into a garden or something like that (where 100% correct perspective wouldn’t matter anyway).
One thing I’ve noted is that when you use smooth bitmapfills without explicitly closing the filled polygon the flash player will sometimes hang / lock up for seconds at a time. Not sure what causes this, and I hope closing the polygon is the ‘real’ fix.
Here is the complete example with sourcecode included: Butterfly2 (1293 downloads) . It’s a Flash IDE FlashDevelop project, meaning you can edit it in FlashDevelop but have to export it from the Flash IDE. If you don’t have a flash ide, setup the butterfly swf as injection swf and specify another output.
Also known as:
- fake 3d using bitmapfills
- transforming bitmapfills
For a project I’m currently working on I have to create a textured cube with clickable hotspots (aka a panorama) that can light up. Easy enough in Papervision, if not for the fact that the performance needs to be very high and oh yes one minor detail it has to be in AS2.
The client will be able to load 6 cubesides in an editor, draw hotspots on each side and press render, which will result in a 3d panorama, in which hotspots are going to light up as you mouse over them. Ah yes did I mention this was AS2?
Although this provides us with a huge range of items to discuss and play with, in this post I want to focus on the basics of one single subject: rendering a textured plane in 3d. I’ll get to the rotating/projecting etc bits later, can’t have too much coolness in one post ;).
Making a reflection is not that hard, but getting it to work right with scaled clips with weird registration points out of the box was a little harder. Anyway I think I came up with something nice, and it performs quite well:
You can download the source and a bunch of demo’s here Reflection Demos (2497 downloads) .
Also known as:
- keeping your sources out of the injection swf
- decoupling your main class from your injection swf
If you are developing your actionscript 2 apps in FlashDevelop, in a lot of cases this means you are using an injection swf.
This injection swf contains all your assets. There are two options to start your program once it’s loaded:
- tell MTASC to execute your main class once all classes are initialized
- call your main class method from the swf once everything is loaded
Note that these two points might not be the same. I use a simple fla template which Read more
Also known as:
- alternative localization method
- grabbing bitmap data from a loaded swf in actionscript 2
- linkageExportForAS in JSFL not working for bitmaps
For Heineken, one of TriMM’s clients, I had to work on a project called the photomodule. Originally written by Paul de Jong, it required some adaptions for another site. One of the adaptions was that the module had to be running in different languages, Portugese, English & Thai (and maybe even more I don’t know).
Since there was little time to complete the project, I didn’t want to get involved in playing with thai fonts and embedding the right glyphs. Originally the solution was to include every screen twice, once in English and once in Thai. However that wasn’t really going to work as well, since I needed it for 2 or 3 other languages, and I wanted to simplify/refactor the setup in order to get acqainted with it.
So I came up with an idea…: Read more
Also known as:
I was working on our AS2 logger today. In particular I was creating a setup where you could simply drop in a couple components in your fla and ‘tada’, you would have a reflecting logger at your disposal.
I’ll go into the reflecting logger and component creation in another post, because what happened was that during a test run I ran into the dreaded 256 levels recursion problem.
Some research indicated that the problem lay with getters and setters.