John set some high expectations with last week's post!
So we mentioned in our first #screenshotsaturday post that we're still working out how to transition between the real and fantasy worlds. Not only is there a shift in the environments, but also in the style in which they're drawn. Some of y'all with a keen eye may have noticed the disparity in that initial gameplay GIF, so I'd like to talk about the differences, and why they're there.
Probably the most obvious inconsistency is that the world of reality is flat-shaded and one-dimensional while the fantasy world seems to take on more dimension through shading. Another visible difference has to do with the colors used in the environments: the colors of the real world are brighter and more discordant while the colors of the fantasy world are more muted and complementary.
It wasn't deliberate, at the outset.
I actually started working on the backgrounds that are a part of Fantastic Jack's reality world back in April 2013. I was feeling really demotivated about Two-Faced and had the idea for the prototype that became Fantastic Jack; it got my mind off of Two-Faced, and gave me a way to focus my creative energy.
Flash forward to August 2014, when we decided that Fantastic Jack should be the next game Adorkable Games would take into development, partnering with Disparity Games to announce Fantastic Jack as part of the Kickstarter for Ninja Pizza Girl. As part of the announcement, we agreed to produce that gameplay GIF.
In retrospect, even the workflow suggested the differences that would emerge between reality and fantasy.
I made a storyboard of the gameplay sequence and a breakdown of the individual assets, then got to work.
I gave myself constraints while creating the real world. I worked inward, starting with the frames of each building, which I blocked out after carefully working out the optimal size of buildings relative to each other; this involved lots of math. After I established the exterior structure, I moved into compartmentalized spaces inside, from the window displays to the back walls, filling in individual items until the space was bursting with detail. I wasn't satisfied with simplicity. Every pixel has intent.
The fantasy worlds feel more expansive, likely from working outward. I collected a lot of references for the fantasy environments but didn't have set boundaries, which enabled the spaces to flow somewhat freeform. By design, the fantasy worlds exist on a larger scale but don't require as much complexity. Without constraints, composition was the key, enabling the environments to breathe. Imagination fills in the details.
Of course, the differences might be attributed to a more basic truth: so much of our reality revolves around indoor spaces, whereas fantasy usually involves the desire to escape and explore.
But I realized that, inadvertently, the inconsistency between worlds carries significance in the context of the gameplay and cemented the contrast as a stylistic decision.
In Fantastic Jack, the real world’s vibrant, clashing colors combined with the presence of detail and lack of depth suggest a shallow exaggeration of our own reality that’s almost overwhelming. Jack’s reality is unwelcoming.
Fantastic Jack’s fantasy worlds are, ironically, more realistic. The lush fantastic worlds evoke the freedom of possibility. The fantasy realm is full of dangers and is challenging to navigate, but is also more exciting. Jack runs faster, jumps higher, as well as acquires other abilities that aren't present in the real world. Yet, as appealing as the fantasy is, Jack can’t exist only in fantasy.
After all, Jack has responsibilities. Like getting home and doing homework.
The way the worlds are drawn mirrors perceptions of reality and fantasy.
Admittedly, I realized a hint of depth snuck into some of the elements of the real world--you can find shading on the streetlights--and some of the elements of the fantasy world are flat--like the snowmobile--but this only reinforces the connection between worlds. The line is blurred.
Plenty of cause to wonder what is reality and what is fantasy.
We're gonna be taking a break from Fantastic Jack next weekend 'cause we'll be celebrating our fourth jammiversary at the Global Game Jam! You can still expect a #screenshotsaturday post from us, but it'll be about our GGJ game instead. Thanks for understanding!
Hello! This is John, and I'm using today's #screenshotsaturday to talk technical.
Something that we've received positive feedback on so far in developing Fantastic Jack is our swirling snow particle simulation, and I'm proud of how that turned out, so I wanted to explain how it works.
Particle systems are a common feature of video games, used for animating dust clouds, raindrops, fire, sparks, and other amorphous phenomena. The technique is simple: just keep track of the center positions of all of the particles, move them all a little bit each frame, and then draw a speck on the screen for each of them.
Usually particles are spawned with their own position, velocity, decay, and other parameters, at which point they move independently for a period of time before evaporating entirely. In a vacuum, that would make sense; but in real life, particles are usually surrounded by air, and air is a fluid that influences their motion. Small particles like snow have very little mass and a lot of air resistance, which means that instead of cutting through the air, they tend to move with the air, revealing the underlying air currents that would otherwise be invisible to the naked eye.
So what do air currents look like? Well, as any meteorologist could tell you, air currents can be extremely complex, chaotic, and hard to predict. But we're not actually trying to represent full weather patterns. We just want a way to move all the particles somewhat randomly but also in a way that's "natural-looking" as they fall to the ground. Fortunately, there exists a simple approximation that looks good enough for our purposes, and it's called "curl noise".
The word "noise" is usually associated with discordant sound effects, so it might seem like a strange connection, but sound isn't the only thing that can be noisy. Noise is just a disturbance of random-ish waves. It just so happens that random sound waves are a defining characteristic of cacophonies, hence the name noise.
Curl noise is an extension of more popular noise patterns like "Perlin noise" and "value noise". I was first introduced to noise patterns with Photoshop's "Clouds" filter. Similar noise patterns are often used to make artificial mountain ranges in computer graphics by using the noise as an elevation map. The introductory videos for Shadershop happen to be a great demonstration of how a program can generate such noise.
We can write a program that maps each snow particle's current position to somewhere in the noise field and use the noise value at that position to determine where the snow should go, but it's not immediately clear how to do that. The noise only gives us one numerical value at each position, but we need both a speed and a direction for each particle.
The first trick we use to solve this problem is to notice that, in addition to a value, every position in the noise field also has a slope. We can check neighboring positions to the north, east, south, and west to calculate the slope, and that slope has both direction and magnitude. If you think about the noise as an elevation map with water particles on it, you would expect water to run downhill and the simulation could use the slope of the noise to determine how to move the water particles.
But there's a big difference between water moving downhill and particles in the air. Water collects into pools in the valleys and stops there. Air currents, however, maintain a relatively even distribution of air pressure, constantly moving without collecting in any one place. We need a somewhat random direction to move the snow particles in that won't eventually leave them all clumped together before they even hit the ground.
Fortunately, there's one more trick we can use to model air currents more accurately: rotate the slope 90 degrees before letting particles move along it. In other words, instead of using (dx, dy) as the direction, use (-dy, dx).
This is actually really elegant, but to understand why, we need to go back to the elevation interpretation. The slope reveals exactly which direction to move a particle in if we wanted it to go uphill or downhill, but we know that if we keep doing either of those things, it'll eventually end up getting stuck at a valley or peak. However, as long as the particle never goes up or down, it can keep going forever. Imagine drawing the elevation as a topographic map with curved lines drawn at each elevation level, looping around peaks and valleys. Moving perpendicular to the slope means following along one of those lines, circling endlessly.
This is what curl noise looks like, but there's still one more problem. The snow particles never cross paths. Our falling snow uses one last trick to look more convincing, which is simply to use a 3D noise field instead of a 2D one. The game may be 2D, but real air currents are 3D and we expect to see a bit more parallax as snow in the foreground and background move in different directions. It's a lot harder to visualize the interior of a 3D noise field, and the slope rotation is a little more complicated in 3D, but the idea of moving perpendicular to the slope while maintaining an elevation is the same. For reference, the 3D slope rotation is (dz - dy, dx - dz, dy - dx). Of course, if you want to be confused, feel free to check out the Wikipedia article on this curl operation!
Thanks for reading!
Our new year's resolution is to talk about ourselves.
We're proud of Two-Faced, our frantic match-three for iOS and Android, but it's definitely a financial failure. Somehow we managed to attend 12 conferences on three continents--mostly as speakers--during development without actually promoting it at any of them. We didn't reach out to journalists, we didn't apply to exhibit, we didn't maintain an active presence on social media or forums. Right as we approached release, we finally contacted journalists, and only one even acknowledged our existence. (Though we did get a good review out of it!) We messed up.
Finally, eight months after the game was released, we organized a booth at PAX Australia, where hundreds--maybe even thousands--of people came to play Two-Faced. Everyone seemed to enjoy it (a few people despite themselves) and some even purchased it while standing in front of us. However, to date we only managed to make 141 sales, 85 on iOS, 56 on Android. A friend and fellow developer, Jason Stark, astutely informed us what our problem was: "It's not the game. It's the marketing."
We've started a new project, and we really want to give ourselves a chance this time. We have to get into the habit of putting ourselves out there. That's not easy for us! We're introverted, and we tend to focus on development to the detriment of promotion. Since there's just two of us (and we didn't make enough money to pay for it), we can't rely on a marketing department. We're gonna have to figure it out ourselves.
So we've decided it's time to start documenting our development process. We expect to learn a lot about ourselves just from being more introspective, and hopefully by the time we're ready to release our next game, we'll have a lot more practice talking about ourselves. We're gonna start by posting for #screenshotsaturday, and having this weekly goal will probably help motivate us to get more work done!
And maybe we'll even get to teach you something!
For anyone who's just starting to follow us, our current project is Fantastic Jack, announced this past summer. We joined forces with Jason and his wife Nicole, otherwise known as Disparity Games, soon after they announced a Kickstarter for Ninja Pizza Girl. Fantastic Jack and Ninja Pizza Girl deal with similar themes like bullying and growing up, so we offered our game as an add-on to their Kickstarter. Of course, now that we've officially announced the game we actually have to finish it!
Jack, our protagonist, evades bullies by escaping into fantasy worlds. We announced the game with an animated GIF trailer showing the neighborhood transforming into an arctic landscape, so now we figured we'd show you one of the other fantasy worlds we're working on. Check out this breakdown of the jungle's separate scrolling layers:
Though we've planned the systems behind the shift between reality and fantasy, we're still figuring out the practical details of how the environments will transition back-and-forth. Follow us here, on Twitter and Facebook to find out what we come up with!
Cheers and happy new year!
John and Ashley