This is the source distribution of Pattern Generator, intended for those who want to have a look in the source code. If you would like to have the executables instead and for more informations about the application, go to http://www.scirra.com/forum/topic65448.html

These .cap files depend on the following 3rd party plugins:

• Resource
• Input System
• Sprite Button
• Perlin Noise (the original one, not its successor Noise 2.0)

Published under CC Attribution 3.0

For more information about the application, follow the link above.

Download

Pattern Generator Source

<font size="2">This is the executable distribution of Pattern Generator, intended for those who want to use the tool while not interested in the source code. If you would like to have the source .cap files instead, go to http://www.scirra.com/forum/topic65458.html</font>

<font size="3">Introduction</font>

One of the best attributes of Construct Classic is its versatility. While it was designed to create games, in fact you can produce almost any type of application. I think that I proved it in the past with applications like "Boom" or "Dancer".

When I decided to step back from the forums, I was thinking about making some of my projects open source. But I have a problem with opening my game projects (most of them not even done!) because they feature unique ideas not yet covered in any other game and to be honest I'd prefer to keep them for myself (yeah, it's selfish <img src="smileys/smiley9.gif" border="0" align="middle"> ).

But this application, while it isn't very unique, can be of good use. That's why I decided to publish it.

<font size="3">About Pattern Generator</font>

I made this application to learn about various aspects, like interfacing, file management, cubic interpolation of colors, creating different shaders from just a perlin noise map, and much more.

With Pattern Generator you are creating graphic patterns. The way you do it with this application is very convenient. Here are a few images created with Pattern Generator (note, the images are unedited, they all are direct outputs from the application):

exim1.png, exim2.png, exim3.png, exim4.png, exim5.png, exim6.png, exim7.png, exim8.png

Pattern Generator features

• multi-language support (super easy creation of your own language file)
• skinning (it's scheming rather than skinning) with the included Skin Editor
• 4 different shader
• one-click-randomization
• saves in its native format and exports to png and jpeg

What Pattern Generator can't do

• no variable image sizes (512x512 only)
• no seamless textures (needs post production to do so)

Let's have a look at the interface (click on thumbnail for a fullsize view):

The best way to explore Pattern Generator is by using a combination of its lock function and the randomize button. Start by randomizing a few times, until you find something that attracts you. A click on the lock item will prevent a change of this property from subsequent calls to randomize. In fact, 7 of the example images above originated from this method.

Things to mention:

• the lock function can be controlled in three ways. A left click locks/unlocks, a right click locks all properties but the one you're clicking on, and a ctrl-right-click unlocks all properties
• you can still change a value that is locked. Locking only affects the randomization
• when changing a gradient's color, you are presented with a second color spot above the one you're changing. A click on this second spot reverts the color, while a click on the original spot accepts the color change and closes the color mixer
• the three small radio buttons of the zoom property control the axis to zoom. From top to bottom: Both axis, horizontal axis, vertical axis
• click on a value to select/deselect it. When selected, use the big slider to change the value. This is relative: The farther away from the slider's center the faster the value change. To the top raises a value, to the bottom lowers.
• The Skin Editor presents an older version of the interface. But it is fully compatible to the current version of Pattern Generator
• When saving a skin/scheme with the Skin Editor, it takes care of all file changes needed. Those skins are immediatly available when starting Pattern Generator the next time
• There's an issue with the Skin Editor where, when you select a value or activate a lock and then click refresh, those items are shown in their normal color. Just click 2x to see the selection color
• To create a language file, copy one of the .lng files and edit it with a text editor. It contains key-value-pairs, should be self explaining. When you're done don't forget to open lng.ini, add your filename in the group "lang" (e.g. 4=polish.lng) and a abbreviation in the group "desc" (keep it under 5 letters, e.g. 4=pl)

<font size="3">Download</font>

Pattern Generator.rar

the thing i didn't get was the relation to dFdx/dFdy/fWidth.There is no direct relation. dFdx/dFdy tell you the difference in x- or y-direction (based on a 2x2 or 3x3 block) and fWidth tells you the overall difference to the neighboring blocks. So, in this context they are variable while pixelWidth/pixelHeight are constant.

if we knew the exact location of the texture transition area, we could sample there and do the interpolation. currently we jump from the end of texture one (gradient = 1.0) to the beginning of texture two (gradient = 0.0). a smoothing factor provided as a variable could describe that interpolation area (threshold) on the basis of pixelWidth/pixelHeight.You shouldn't work pixel-based when you want to smooth edges. But if you want to give it a try: You get the adjacent pixel positions from

(floor(x/pixelWidth) [+, -] 1) * pixelWidth

(floor(y/pixelHeight) [+, -] 1) * pixelHeight

As an example, the next pixel on the right from the current position would be located at

vec2 right = vec2((floor(vTex.x/pixelWidth) + 1) * pixelWidth, floor(vTex.y/pixelHeight) * pixelHeight)

my main problem is that i can't imagine how to implement this gap area with my current code. Gustavson suggest taking into account the variables uScale cos(uYrot), but i don't know exactly which part of my code corresponds to those.From what I see you're not scaling, so uScale will be 1, while uYrot should be equivalent to 'ro'.

<font color=Blue>

EDIT

oppenheimer

I made a big mistake! The only excuse I have is that I was awake for almost 30 hours, when I wrote it. I'm very sorry. I corrected the error and add it here again:</font>

<font color=Green>
(floor(x/pixelWidth) (+, -) 1) * pixelWidth
(floor(y/pixelHeight) (+, -) 1) * pixelHeight

vec2 right = vec2((floor(vTex.x/pixelWidth) + 1) * pixelWidth, floor(vTex.y/pixelHeight) * pixelHeight)
</font>

I can't help much, but since you don't seem to get an answer, I'll give that little bit of information I have.

I'm not working with C2, and my experiences are from HLSL and Ashley's implementation of pixelWidth/Height there, but since GLSL is very close to HLSL and there's probably no reason for Ashley to change the behavior of pixelWidth/Height (I'll omit 'pixelHeight' now), here's my two cents.

pixelWidth is nothing more than the width relative to the normalized display size. Or, in other words, pixelWidth = 1/display size and unnormalized display size = 1/pixelWidth.

You should be able to use smoothstep, since it is available from v1.3 up. The example, you linked to, contains an alternate method to aa when dFdx/dFdy are not available. It explains that you need to know the "window size, the view transformation, the gradient in texture space and the relation between texture coordinates and world coordinates".

Well, the texture coords are absolute values of the normalized world (display) coordinates, like 0.25, 0.25, 0.5, 0.5 (a texture half of the display size, centered on screen). You get the window (display) size from 1/pixelWidth, you should already know, how you transform the view (or expect it to be untransformed), but I don't exactly understand "gradient in texture space". Maybe that's the range of grey shades from the texture's colors? That's the last point you have to find out by yourself.

Maybe this doesn't help you, or you already knew. But better told twice than never ;)

Could you confirm the lag and stuttering is occurring DURING the game itself or after death?I can confirm, yes. It starts to build up right after start and becomes unplayable (and the sound unbearable =)) after about 30 seconds.

and what about in the chrome browser?I can't tell. For personal reasons I don't support Google in any way. From what I heard from Ashley, Chrome should have full WebGL hardware support on Win XP. I would expect the game to work on Chrome. But I'm just guessing.

Tommyttk

You're absolutely right, and I'm still working on it (it's sooooo hard for me to get the graphics right). I tried your game and would have loved to see more of it. Interesting effects, esp. for a browser game. Unfortunately, as all other HTML5 games, it just didn't work on my combo (Win XP, Firefox 19). It stressed my cpu so much that not only the game lagged severely, but also the audio stuttered and distorted, an error that persisted and could only be resolved by restarting.

It's not your game's fault! It's just frustrating sitting there with a 460 GTX gfx card, capable of running such games two or three times parallel, but the browser developers cut me from the technology and force me to use just 1 core of my cpu for both, graphics and math.

But I really like your showcasing of what WebGL etc. would be capable of - you've done a good job!

EDIT: Now I'm confused. Trying r4dicaldreamer 's game, it ran smooth. No lagging, no audio stutter/distortion. Did you use effects as well, r4dicaldreamer, or just sprite animations? (Well polished game for a one-week contest. Amazing!)

It was an interesting experience.

For the first time ever I participated in such a contest. It started very bad, because I was struggling with the theme. Took me almost 1.5 days before I had an idea. Instead of building the game world around the theme ("chaos") I decided to build a game engine from chaos. Fractal procederal generation of every aspect, from the game's main objects to the smallest effects. The ambient sounds are structured from it, the animated background as well, the movement pattern of the obstacles (composed from properties like speed, interval, number of obstacles, number of movement steps, etc.), even if and when the game music is playing. Everything.

I was so in love with it, that I wasted way to much time on less important things, neglecting what people first attract to: Nice graphics for the player and the obstacles. Instead the game has simple placeholder "art".

Next time I'll choose a somewhat easier idea <img src="smileys/smiley36.gif" border="0" align="middle">

In case you want to roast me, here's the link to the game: Rough

However, it was interesting. I think I'll join such contests more often.

To avoid misunderstandings, I think there's yet need for a description:

As I said in the first post, this is a short film, not a game trailer or something. What the artist did was taking the speed run of a player from

Super Mario Bros 3 (I think, this sequence is the one he used)

and then recreated everything frame by frame in a 3D environment using lots of render passes (the rendering alone, if done on a single computer, would have lasted 50 days)

Here's a

video.

Won't comment this short film, besides...

<font size="3">Awesome! Just awesome.</font>

On my journey through the world of html5 and its game creators, I stumbled upon this one. If you know it already, you know of the fun. If not, you should immediately try it out!

Ever wanted to show the Scirra website who's boss? Now you can:

<img src="http://dl.dropbox.com/u/11182740/pictures/Scirra_1.png" border="0">

<img src="http://dl.dropbox.com/u/11182740/pictures/Scirra_2.png" border="0">

All you have to do is to navigate to the app's site: Kick Ass - Destroy the web

Drag the launch button to your bookmarks bar. Now navigate to any website you like, then click on the link in the bookmarks bar to activate your ship - and start having fun ;)

You can even design your very own ship with an easy editor!

Have fun.

Questions::

1) Is it a correct way to do it?

2) Are there better ways?

3) What retrieves from 'GetTicks' by Profiler object? I cant' understand it.1) In cases like these there is no correct or wrong way. See it like this: If it works, it's just fine.

But to satisfy your curiosity, the profiler was designed to measure the processor load of events.

2) No. There are other ways, but they aren't better. For example, in "Verve!" I used a custom deltatime calculated from the deltatimes before (while timescale was 1.0). The great disadvantage of such a method is that you don't work with the current, the real, deltatime, but with an average that is not very accurate per tick.

3) As I said in 1), the profiler was designed to measure the processor load of events. This would be a typical use of it:

+

-> Begin profiling

+ For "" from 1 to 10000

-> Add 1 to global('just_some_variable')

+

-> End profiling

-> Set text to Profiler.GetSeconds

The "ticks" should not be confused with Construct's ticks. They are better known as clock cycles per instruction (or the summary of all instructions in this case). You may want to read more about it here

Congratulations for getting the project on Kickstarter. It surely was hard work. Now let's hope the best.

And all of you Constructors who play the demo and think it's worth it: Back the project or spread the word!