Cloud-based data creation explained
We all have our own workflows to create data to be integrated in development. The technic I'm going to expose here is how I deal with cloud-based data creation. This article mostly targets the average programmer who is in the need to implement 2D demo-effect, like the one in Pheelone's plasma demo (screenshot below).
Disclaimer : the pattern exposed here is my personal way to achieve this thing, there may be other similar/better approaches.
Disclaimer : the pattern exposed here is my personal way to achieve this thing, there may be other similar/better approaches.
Pheelone's plasma part
What are clouds and why should I care ?
A cloud texture
Cloud is the name of a Adobe Photoshop feature allowing to generate texture contact like the one put here as example. This name is common and reused from all the major painting software.
This kind of texture can be reused as data to pre-calculate values that have to smoothly change through movement / shape. Think about it : basically, what we have looking at the example at the left is a two dimensional table containing grayscale values from 0 (black) to 255 (white).
This kind of texture can be reused as data to pre-calculate values that have to smoothly change through movement / shape. Think about it : basically, what we have looking at the example at the left is a two dimensional table containing grayscale values from 0 (black) to 255 (white).
- In the "modern" programming world, this is commonly used to create terrain-based 3D engines based on "elevation map" (even current games still use this technic, have a look at FarCry game by example).
An elevation map gives the Y coordinates to any X/Z 3D surface
Ubisoft's FarCry game use a terrain-engine based on huge elevation maps
- In the "demoscene" programming world, clouds allow to achieve common 2d effects such as plasmas, etc. This also can give better variation in effects than the usual sinus-based effects.
What are tools that I need to create my cloud textures for my Amstrad CPC developments ?
I personally use 2 tools for all my graphical developments. The great thing is that they are free of charge :
- Paint.net : this is a free Photoshop clone. This full-featured application is mature and stable !
- IrfanViewer : I think I use this tool for ages :) It's a simple picture viewer but it also features some interesting image conversion that every Amstrad CPC programmers should be aware of.
Step 1 : create a texture
This is going to be a quick introduction : just open Paint.net, create a new image with desired size (64x64 seems to be a reasonable size when targeting the CPC, depending of the effect you are programming). Still using Paint.Net, go to Effects / Render / Clouds...
This is our base image :
This is our base image :
The texture we just created
Step 2: auto-level the texture
The generated texture may look cool, but is now optimal to the usage we want to do with. We see some white, some dark, but it clearly shows than the full range of color in the palette are not used.
What we need is the following :
What we need is the following :
Colors are properly rescaled
To accomplish this, you need to use Adjustments / Auto-Level... under Paint.Net.
Step 3: convert the texture to a seamless one
Just using the generated shape can be ok for your needs (in that case, jump to Step 4).
But there are contexts where you might want to get your texture nicely "looping" : the colors at right-edge should be the same than the left one, and same thing for top vs. bottom. That way, you could achieve offset on both X and Y axises and you will never see some kind of split in the values.
But there are contexts where you might want to get your texture nicely "looping" : the colors at right-edge should be the same than the left one, and same thing for top vs. bottom. That way, you could achieve offset on both X and Y axises and you will never see some kind of split in the values.
Seamless version of the texture : all boundaries correctly loop
To get through this, I personally use a Paint.net plug-in called Seamless Texture Maker, available here (make sure to read the installation steps). With it, you can decide to loop on both axises, or only horizontally / vertically.
Once installed, you have to go to Effects / Distort / Seamless Texture Maker... under Paint.net.
Once installed, you have to go to Effects / Distort / Seamless Texture Maker... under Paint.net.
Step 4: converting the texture to Amstrad CPC
So now all we have is a 24bit RGB bitmap. The format, while common on PC, is not interesting for Amstrad CPC development. What we want is a simple bi-dimensional table containing 8-bit values.
Fortunately, Irfan Viewer is going to help us for that. You can convert the original 24BPP image to a 8BPP (256 colors - image will remain intact than the one under Paint.Net) or 4BPP (16 colors, image quality will be degraded).
Fortunately, Irfan Viewer is going to help us for that. You can convert the original 24BPP image to a 8BPP (256 colors - image will remain intact than the one under Paint.Net) or 4BPP (16 colors, image quality will be degraded).
8BPP, 256 colors (256 distinct possible values)
4BPP, 16 colors (16 distinct values)
To accomplish that, go to the menu and select Image / Decrease Color Depth... . This will display a dialog with options you might be interested. Of course, the ones that really matters is the color depth (8BPP or 4BPP), and don't forget also to select the Make Grayscale option.
Step 5: getting raw data ready to be integrated in your project
Still under Irfan Viewer, you can now save your image as a .BMP file (by example).
Also, you can save this image as a .RAW file. This will basically create a binary file, without any kind of bitmap header.
Finally, this is what you get as result, values varying from &00 to &0F for a 4BPP image :
Also, you can save this image as a .RAW file. This will basically create a binary file, without any kind of bitmap header.
Finally, this is what you get as result, values varying from &00 to &0F for a 4BPP image :
Conclusion
This is the end of this article. Maybe it will appear like relatively poor to people used to create cloud-based effects, or maybe (that would be great, it's the aim of this article article after all !) it will ring a bell to some of you :)
If you have any kind of improvements to add to this article, fell free to contact me, I will be glad to update it.
If you have any kind of improvements to add to this article, fell free to contact me, I will be glad to update it.
