Posts Tagged ‘3D’

Animation of the Artillery

Artillery of WinThatWar!

Original : Fisher Body craftmen

The animation of the vehicles is a perfect blend of handmade animation and procedural animation. I would like to begin with the latter type of animation, and here are the related elements:

> The movement of the vehicle is supported by the physical engine of the game. In this way, the vehicle follows the inclination of a virtual grid, a collision volume or, more simply, a deformed plan simulating the relief of the ground.

> The Artillery also needs to be able to shoot from different ranges and angles. Thus, the articulations related to the rotation of the cannon are animated by the code (what we call the “logic”) so that the shot adjusts itself directly to the position of the target, according to the position of the Artillery.

> The caterpillar tracks are also animated, following the movement of the vehicle. This effect is obtained by dynamically moving the UV coordinates of the model, in game, in accordance with the speed of the vehicle.

As a reminder, the UV coordinates are the correspondence between 3D coordinate (xyz) and 2D (uv) used to indicate where and how the textures are “drawn” on the model. In the case of the tracks, we could say that the UV “glide” on the 3D, giving an impression of rolling movement.

Artillery caterpillar continuous track

All the other animations are handled beforehand by the animator.

The animator is free to use all the other articulations available, except for the 2 articulations handled by the engine that we addressed earlier: the horizontal rotation of the turret and the vertical lifting of the cannon.

In the case of the Artillery, here are the elements created “by hand”, before the “logic” steps in:

> The animation of the installation. The vehicle is rather slow to get into siege position, and conveys the impression of a powerful weapon, which takes time to set up but is destructive. The disassembly is, however, much more short.

> Creation of shock absorption and a wave that shakes the whole vehicle when the Artillery shoots. This animation is achieved through the lifting of the mudguards, which is then synchronised with a shockwave effect, creating dust clouds.

animation joints and curves

And now, about shooting. This is when we add the particle effect which helps materialise the projectile, in the form of a plasma ball.

Finally, the death animation of the Artillery is simulated using the physical engine, called Mass FX. It is pre-calculated with the 3D modeling software and then reworked by the animator to get the desired result.

This animation goes with a smoke cloud and fragments spraying all around the vehicle. The destruction of the Artillery, alone, is not impressive enough to the player:

dislocation

This is pretty much the life of the Artillery. From the moment it leaves the factory to its death of the battle field.

This post about animation is the first half of a two-part article. The next post will be entirely dedicated to the Sound Design of the Artillery which, as you will see, is directly related to the different animations addressed here.

I love splines!

 

A curve

In Mathematics, a Spline is a numeric Function that is Piecewise-defined by Polynomial function, and which possesses a high degree of smoothness at the places where the polynomial pieces connect (which are known as knots)“. Thank you dear Wikipedia, I couldn’t have said it better myself.

“But, what link can there possibly be between Splines and Polygons?” you may ask yourself. And that’s a legitimate question, since I usually write about polygons and cake (made from polygons too).

Well, you have to know you can actually create 3D models by using these famous splines. That’s right!

A basic spline

As you may know, I mainly use 3DS Max to model my vehicles, buildings, etc. 3DS  taught me to use the word “spline” to define a 3D Bezier curve when it comes to design.

Actually, It’s a commonly used technique in automotive design. Seeing as I mostly model vehicles, it makes perfect sense for me to be working with curves.

However, I apologize in advance, because somehow, I have the feeling this post will feel like a tutorial.

The 3DS Max “Lathe” tool works just like an actual shaping tool and allows to easily sculpt an object  with a very smooth shape.
So, as an example, I’ve made a pretty bowl for you:

The process to use Lathe modifier.

I’ve got another little trick for you : You also can do what is called a “Sweep”. This is actually a  standard shape that you’ll select and with which you’ll “sweep” the previously drawn curve.  The shape is then multiplied to create the desired object.
Here is another example for you, and be prepared, I went a bit crazy and I’m now modeling…a mug!

The process to use Sweep modifier.

Anyway, now that you see how it works, let’s get serious and I’ll show you how you can apply it to your 3D modeling.

Once, in my student days, I was looking for a tool to model by using Splines, and I finally found a tool called SURFACE. At the beginning, Surface was a third party plugin, then Kinetix eventually bought the licence and included the tool in 3DS Max 3.0. I don’t know who this third-party is, but I owe him a big “thanks”.

Digging through my archives, I found the following model. That’s what it looked like the first time I tried to use this tool, based on three pieces of circles intersecting with each other.

The use of a Surface modifier

How did the software turn this into that? I don’t have a clue. Voodoo magic?
Well, and so… how do you put this technique into practice? Among other things, you can  use these tricks to model a vehicle. An airplane, for example.

Use of spline in modeling

It can also be used for specific organic creations.
Like for this wonderful purple…marshmallow.
I could probably have made something sexier, but you get the idea.

Chantilly

In short, I love modeling using Splines . The tool “Surface modifier ” is probably my favorite, it’s part of the workflow for all my vehicles .

I also think it’s a good starting point to model an object with a lot of rounded surfaces .

However , be aware that Splines, alone, are difficult to comprehend in 3D for our poor humanoid eyes that can’t decide whether a form is curved or hollow. So we will have to get used to the tool and rotate around your model, regularly move the camera angle to visualize the form , and then use the Surface modifier.

If you’re not using this technique already, I can only recommend you try it asap!

Cheers

Philemon

Mineral 1 – Sharp Crystal

I won’t write a novel on this blog today, I swear.
We just wanted to show you this new modeled version of the Sharp Crystal.
Mineral PatchUntil now, the Crystal you could have seen in game was kind of a “test” model, allowing you to play the game while waiting for this new one.
The Sharp Crystal is a common ore. It’s the basic element for construction.

It’s really simple. For now, in WinThatWar! you just have to take care of the level of two resources. The first one is the Energy, created through generators, and the second one is the Sharp Crystal you have to extract through… well, through an extractor.

We chose as reference a particular ore : Ilmenite. A titanium and iron oxyde mineral.

ilmenite ilmenite
The hexagonal shapes are used to represent strengh and solidity. We hope it works!
We tried to make it very raw/unrefined, as it’s mean to be the most basic resource of the game. But at the same time we wanted it a bit sharp.

When it came to color it, we thought it needed to be Surreal, so the purple was perfect.
We really want the player (a.k.a you) to desire to find and extract this kind of cake made of Crystal.

Top View
It’s not really a retro-future style element, as you may have noticed, but I think it contrasts nicely with the retro-futurism style of the buildings, as the extractor, for example:

Extractor plus Mineral Patch

Hope you could find some on a distant planet. I think you could find it useful.

Cheers

The cake is a lie

This post is not about the game Portal, sorry, it’s about baking cakes…

First, imagine that you want to make a cake like this one:

a cake rendered with Marmoset
You do a nice and highly detailed cake model. It’s perfect.

But it’s just one, and you’re really hungry. You want more cakes, lots of cakes!

Unfortunately, you can’t just put 1000 high resolution cakes in a scene. So, you have to learn how to bake.

A cake in my game

Indeed, in a video game, you expect a smooth rendering. Especially for action games, as racing games, you want a lot of images per second. To accomplish that you have to respect a polygon budget (also called polycount). Doing that, you will ensure to have a good framerate when you will run the game on your computer. If you don’t keep to that limitation you will (probably) suffer of latency.

The computing of a 3D scene into a 2D image takes time. But, naturally, you don’t want the player having to wait for it. So you have to make both (high and low poly) if you want a good result without affecting visual quality (theoretically).

The principle is: you just have to bake the high poly on the low poly. Seems simple, right ?

polycount difference between two 3d models

Okay, it’s not really a “baking” thing, it’s more a projection.

The volume informations are transferred from the high onto the low polygon mesh in the form of a texture (or map). This texture is made of 2D informations that the graphical engine will read to produce the real time rendering.

Remember, only the low polygon mesh is exported to the game (and its maps of course).

Here are a normal map and an ambient occlusion map:

Maps result of the baking You can see the result on a simple plane:

a flat cake
Easy!

A comparison between the 2 models: baking on a volume is a bit harder than on a plane.

Comparison between 2 models.

As you can see you’ll lost some important details like the rounded border of the bottom of the cake. Your goal, as an artist, will ideally be to preserve the silhouette of your model.

The recipe

So far, that was just a cake. Now, here come the real thing and the serious business. I give you my own recipe.

Step 1) You create a High Poly.

HighPoly Mesh Colored

It’s an example of High Poly mesh (3 millions triangles) with false colors.

Step 2) You create a Low Poly.

 

Low Poly of a building

It’s an example of low polygon mesh (6,000 triangles).

Step 3) You try to adjust both to get a  perfect superposition (almost).

Superposition of both high and low polyIt should give you something like this.

Step 4) You can add a Cage to it (and visually hide the Low Poly).

Nicolas Cage

The Cage is used to properly define the projection between the high and the low.

Step 5) Explode everything!

Exploded Models

The point of this explosion is to avoid interpenetration and shadowing (ambient occlusion) between pieces.

And yes, the time has come for you to push a button and wait patiently for the result, wondering if you didn’t forget one step.

Patiently…

And here it is, all hot. You can get it out of the oven.

low poly with baked informations

There are still some imperfections to fix. Maybe a step six is needed. But it will be for the next time.

At the end, to achieve the creation of a good cake, you need to strictly follow the recipe knowing that the result is worth the efforts and time you spent on it. The better maps you get, the easier will be the texturing part. Especially if you are using a fast texturing solution like Substance Designer, that I have used to bake this asset. That’s why it’s a very sensitive part that will validate (or not) the modeling you did before.

So, the baking is no longer a secret for you.

Don’t hesitate to ask for help if you don’t get the result you were expecting.

See you next time.

Philemon

If you want to learn more about baking:

http://wiki.polycount.com/wiki/Normal_map#Baking

 

Missing ingredient

Today, what about a cooking class ?
No, no, ok , we were just kidding.

A post about video games’ main ingredients sounds better to you? We’re not pretending that we know a magic solution, if so we would already had released Win That War! for good and sold 3 millions of copies in only 2 weeks…I guess.

Well, let’s see. What did we not mention yet and which could make an important difference when you spend a lot of time playing a game ? We already wrote about game-design, game-logic, gameplay (and all these words starting with “game”), game engine, 3D, biomes, pathfinding… So what is it about today ?

Any idea ?

Untitled design (1)

Of course :
Music and sound effects.

Two freelances musicians are working on these.  Cid is in charge of the sound environment of the game, inspired by the mid-21st century ‘s musics with a little touch of “pizzazz” to make it more modern. And Jean-Phi creates sound effects : construction, destruction, explosion…he draws in various references to then produce sound elements that not only fit to Win That War! universe, but should also not get the player bored or bothered even after several hours playing the same game. A matter of balance.

Wwise

The technology used is called Wwise. It’s a fabulous tool which is “artist driven”. Basically that means programmers only have to put events in the code (like “a tank explodes”, “the menu closes”…) and the musicians can choose how to mix sounds together, based on these events, without having a line of code to write. This allows us to do spatial positioning 7.1, but also procedural music based on scores that combine with each others to fit the intensity of gameplay. And that’s really cool.

And finally, here is a little video for you.

At your service – The user experience

Insane User Experience

Hello everyone!

Looking at this blog posts, we can easily realize we write a lot about programming, but not that much about game-design. One facet of the game-design consists in thinking the user interface (UI). But writing about UI these days is so outdated! Now, people talks about UX, and UX only. Actually, it’s about the user global experience of the game. We can find lots of theories and recommendations all over the Internet.

Factory build queue
Factory build queue

The insane UX process

I have a practical approach about it :

  1. I reasonably code the UI. I want it convenient, plain and understandable.
  2. I test it, you test it,
  3. I improve it.
  4. And so on. Back to step 2.
Energy and Sharp Crysal gauges
Energy and Sharp Crysal gauges

 

The best feedbacks we had so far were from players who tested the game during some fairs (Stunfest, Utopiales)…even if it often makes us start all over again.

Our approach of the Win That War! UI

Why should you have to double-click while a simple click is enough? Why should you have to move the mouse till the very bottom of your screen while the menu could come up in its middle? UI is all about giving the player a nice experience,  that’s why I try to remain faithful to those principles :

  • every clickable component (no matter if 2D or 3D) has to react on mouse-over
  • every change in the game has to be visually and easily identifiable…
  • …and every visual change has to be the exact reflection of the simulation (damages, building progression, etc.)
  • at one time, necessary information only have to be showed up depending of the situation
  • in order not to penalize the player, the action has to be restricted ( ONE click, ONE button, ONE mouse-move…)
  • the more common is an operation, the more it has to be simple to execute.
  • for every action, we’ve integrated visual and sound feedback to easily inform the player that this action was taken into consideration.

Well, well, well…written like this, it may sounds really easy to do, but actually it requires a lot of work…

Feedbacks building tank traps
Feedbacks building tank traps

Since my latest post about UI, we worked on the conception of a brand new animated SVG-based panel. The UI is entirely javascript-coded.  And I’m using only 3 external libraries :

Jquery (I mean…How I’m supposed to do without it?)

requirejs (To fill Javascript major gaps)

snap (To easily manipulate the SVG)

 

 

 

The new alpha version of Win That War! will be released soon, so you could test it and send us your feedbacks. Then “back to step 2”

Brand new generators

Let’s end the week (and the month) smoothly, and with some pictures. Philemon worked his fingers to the bones this month, and after the air units, we now can show you some of the buildings that will be integrated in the future. So, we have a lot of pretty things to show you, and today our brand new generator is in the spotlight.

Once upon a time : Tesla

Concept generator 2 Insane UnityAs every creation, this generator was born of a mix between some selected references and our artist’s imagination. This time, he kind of felt in love with a nice monument which quite inspired him.

If you’re a geek-person, or if you have an inquiring mind (even if you’re an electricity specialist or if you are well up in general knowledge…it’s ok, no judgement) you might already have heard the name of Nikola Tesla. Tesla was a great scientist and an very creative man. He is behind many discoveries and innovations in the wide world of electric energy.  But Hey, nor you nor us are on here for a History class, and you probably could find loads of information about that dear Nikola all over the Internet.

Well, why are we writing about that ? Actually, because the Las Vegas “Tesla fountain” commemorative monument was the main reference used by Philemon to design the Generator. You can take a look here and here. You might well notice some elements you’ll also find on the illustrations below.

And there was the Generator

Concept Generator Insane Unity
As you can imagine, our generator is used to…generate energy.  As a power (or nuclear) station, once built, this building produces energy that will be used by your other buildings and units. However, be careful not to overuse its power, otherwise BOOM !

3D generator Insane Unity

Wait…we didn’t noticed him, but Michel (our robot-engineer) is on this screenshot. You, little scamp!

Have a nice weekend.

Return top