Telling Stories

One of the main activities of humankind is telling stories. We all tell stories. 

When we describe the day just passed to our partner over dinner, we’re telling a story. When at the pub with our friends we list the problems we’re having at work, we’re telling a story.

Every day, we are also passive listeners of other people’s stories.

When we read a book, the author is telling us a story. When we watch a commercial on television, the advertisers are telling us a story. When we listen to a song, the singer is telling us a story.

If you think about it, every day we create and listen to stories. The whole world is some kind of cacophony of stories being mixed together and bouncing from one person to another, in an endless spiral of stories, tales, anecdotes.

We are stories telling other stories.

All these stories are being told and listened to because telling stories is a need.

It's always been.

From the beginning of humankind, man has told stories. 

Telling stories is an activity that humankind has been doing since before language and writing were even invented.

But what is our purpose when we tell stories? And how can all of this be applied to the creation of a videogame?

The series of articles Interactive Storytelling will deal with this topic, looking into the mechanisms of classic and modern narrative, and will provide you with tools to tell an interactive story.

Why We Tell Stories

Telling stories can have different meanings and goals. Sometimes a story is a way to tell a fact; sometimes it is a way to exorcise our fears; in other cases someone tells a story just for fun.

Telling stories is a way to express our personality and creativity, and to show aspects of our thoughts that we wouldn’t be able to express otherwise.

Indeed, storytelling and communicating facts are two very different matters.

When we are communicating and presenting facts, we simply expose the pertinent events. That’s what journalists do, for example: they present the facts as they happened, without personal details, opinions, or feelings. This way, the listeners can make up their own minds.

But when we’re telling a story, the narrative becomes personal: we add our opinions (even just indirectly, through a look or tone of voice—or, if you’re Italian like me, using gestures), we emphasize details that are important to us, and generally we filter the facts through our way of looking at things and our cultural background.

Somehow, we customize the story we’re telling so that our audience will get the messagewe want to convey, and not simply a list of the events. We don’t want our listeners to come up with their own opinion; we want, first and foremost, to give them ours.

And we do so because we want our storytelling to cause a response.

Source: http://www.onespot.com/blog/infographic-the-science-of-storytelling/

We want people listening to our story to have fun, or feel moved. Or to sympathize with us, or get angry or comfort us. Even when we’re not the subject of the story, we tell it to create an emotional response in the other person—maybe to share a feeling.

Let Me Give You an Example

Case 1: you’re at the pub sitting by the bar, watching TV. The journalist is telling the news about the corruption of an important entrepreneur and explains that, as a consequence, many workers are going to lose their jobs.

Response: the information is presented in a neutral way, and you process it according to your personal situation and decide how to respond. If you’re a worker, you’re going to feel empathy and then rage. If you’re a writer, you might get curious, and maybe will want to write an article about the story. If you’re a rich entrepreneur, you may be wondering about the possibility of easily taking over the business of the corrupted man. Whatever the response is, it’s up to you.

Case 2: a few minutes later, a man arrives and sits next to you by the bar. He starts to talk and tells you how desperate he is because he’s one of the workers that are losing their jobs, and he has a daughter in high school and a mortgage to pay.

Response: the information is now presented to you in the way your interlocutor intended. His story is filled with rage and disappointment. You process it according to your personal situation, but you’re influenced by the way the story was told. Your response may be similar to one described in the first example or, instead, could be different, affected by the man who told this story.

The better the narrator is at telling stories, the more he will be able to affect who is listening.

So, in summary, we can say that we tell a story to convey a messagewith the goal of provoking a responsein who is listening.

How We Tell Stories

The Tools of the Trade

We use tools to tell our stories: these tools are not just pencil and paper or a microphone. As we’re going to see in greater detail, there are tools we often use without even realizing it.

For example, voice modulation while telling a story is a tool. Emphasizing a word and speeding up or slowing down the narrative are all means of pushing our listeners to respond the way we want. As narrators, we have the power to direct our interlocutors’ reactions towards our desired goal.

As professional narrators (because these articles are precisely meant to give you tips so that you will be able to apply the concepts of storytelling to products like videogames), we have a dutyto do so.

We cannot write a story without knowing where we want to take the players or what kind of response we want to provoke in them: otherwise, our narrative is going to be very weak.

And in order to make the most of it, we have to correctly master the tools at our disposal.

Interdisciplinary Experiences

The first group of tools are interdisciplinary experiences. As narrators of a videogame, we can exploit a great deal of things to tell stories. Background music, for example. Or the lights in a scene; or the chromatic correction applied to the game camera.

But, in order to use these tools, we have to know them. The first advice I can give you, then, is give yourself a smattering of each of these tools. You’re a Game Designer, that’s true, not an Artist or a Sound Designer. Nonetheless, you can’t be totally unaware of how their tools work. Ignoring the basic rules of directing will cause you to write a cutscene lacking in rhythm or using angles not suitable for conveying the intended message to the player.

Clearly, if you work in a very large team, there are going to be people who specialize in those areas—and they will get to decide, probably, the final results regarding those aspects. However, having some knowledge of their fields will allow you to create a common ground and engage constructively with them, and to suggest what your vision is like as author of the story.

For example, if you want to convey fear or anxiety or discomfort during a game sequence, you can use certain kinds of background sounds or give the camera a particular angle. But in order to do so, you have to know howadjusting the angle of the camera can affect the player’s response. All of this is part of the storytelling: camera, music, sounds, colors, are all tools to exploit.

A journey has a direction that tells the story with images and colors.

So, the more you know about those, the better.

Life Experiences

The second group of tools are life experiences. When I teach Game Design, one of the first things I notice is that students think of themselves as potentially good game designers because they play a lot. It’s clear that playing frequently and knowing the relevant market is essential. But just playing will make you a poor narrator as you will tend to repeat what you saw in someone else’s game.

Instead, doing things that are differentfrom playing will widen your knowledge and culture.

One of the secrets of telling a goodstory is knowing who you are addressing. And, as a result, adjusting the way you tell the story so that it will affect your target audience as much as possible.

Now, if your target audience consists of people passionate about opera, one of the first things that you’ll have to do is attend ten performances at the opera house. And not just that. You’ll have to go hiking, paddle a canoe, paint a picture.

Why?

Because you’ll learn new and different tools and ways of handling the narrative that will widen your possibilitiesin storytelling. The more you know, and the more you've studied or tried, the better you’re going to be at telling a story.

Man and Animals

Making Up Stories

One of the main differences between man and animal is the ability to tell a story. Many animals are able to communicate among themselves and transmit to each other information about the location of food or a source of danger.

However, exactly as we do, animals are able to tell themselves stories. An animal can tell itself a story through dreams, while sleeping. I recently observed my cat. When he’s asleep, he often makes the same noises and mouth movements as he does while hunting for bugs around the house. I did a little research and found papers that show that cats dream things that have never happened.

But the big difference from our dreams is that animals cannot invent using their imagination. Their dream, even if it’s never happened, is based on actual facts. We, instead, are free to dream and make up stories based on things that not only have never happened, but that can’t happen (raise your hand if you’ve never dreamed of having some kind of superpower!).

Imagination, therefore, is the third tool at our disposal to tell stories: we can make them up and make them believable—sometimes until our listener is convinced that what we’re telling is the truth. I think that politics is based on this principle… but I’m not a great expert in politics.

Cooperation

The other great difference between us and the animals is the ability to build upon the ideas of others, in a collaborative way.

For example: an ant is able to say to another ant, “There’s food further in this direction.” But a third ant, looking at the conversation, cannot add, “And if you go even further, you’ll find water.” The third ant, in order to express its message, will have to start a new conversation from scratch. This may look like a small limitation, but it’s actually the reason why humankind has been able to achieve such great scientific progress. Because when we study something, we start from what others have studied and demonstrated and toldus, for example through a book. We don’t have to start from scratch and can focus on the next step.

This is a way of telling stories cooperatively. Cooperation, which is our fourth tool, is a form of interaction.

And we can define interaction like this: a reciprocal exchange of information between two parties, through a medium.

Storytelling in Video Games

Finally, after this long premise, we can deal with the heart of the subject: why and how to tell stories in a videogame. We've made clear what storytelling means, what the purpose of storytelling is, and which tools we can use, and we also gave a definition to the word interactive. Which is really important because, with the birth of videogames, a form of narrative previously considered “experimental” has actually become one of the most popular and relevant kinds of contemporary narrative: interactive storytelling.

And this is the reason why storytelling in videogames is so important: because the way you can tell stories with a videogame, you cannot tell them through any other medium.

In fact, videogames allow you to organize messages and to provoke reactions so complex and so powerful they make narrative a unique and, in many ways, new experience.

Yeah, of course, Interactive Storytelling will be one of the new "big things" in the future.

Conclusion

Man has been telling stories since forever, but only with videogames did he start telling interactive stories.

But what is a classic narrative like? And how is a videogame narrative different from a classic one? Finally, how many kinds of interactive storytelling exist?

The next article will answer these and other questions.

As the gaming industry, and especially the indie gaming industry, continues to mature, the need for inclusive standards becomes more evident. 

Accessibility in your game isn’t just about making it so that a subset of gamers can enjoy your work—although that’s certainly a large factor. It’s also about making your game easier to comprehend for all users, removing unnecessary strain from their experiences wherever possible. 

Games that take accessibility into account allow gamers to play longer with fewer negative impacts on their eyesight. Let’s look into the specifics of why this is important, and how we can add more accessibility to the text displays in our games.

Why Accessibility Is Important in Games

For many players, the range of games they play is severely limited by little things that most of us take for granted. For example, color contrast and brightness can make the dialogue of a game unreadable for up to 10 million players in the United States alone, according to the National Federation of the Blind. That's 3% of the US population that can’t play your game, and the number grows exponentially for games released in multiple countries.

Regardless, keeping text displays accessible is important for every player. Clearer displays improve the overall experience and prevent additional strain on the eyes. Players often become frustrated by unreadable text—especially in RPGs, where it appears most prevalently. 

For example, small, stylized fonts on parchment backgrounds aren’t the easiest to read. To help prevent these issues in your own games, let’s take a look at some common ways to improve accessibility.

Accessible Design in Games

There currently are no accessibility standards for video games, so we’ll be looking at adapting guidelines created by the W3C for use in web design. They’ve broken visual accessibility down into seven main categories, but we’ll focus on the first two: Brightness & Color and Tracking.

Brightness & Color

The first section is not only crucial for making a playing experience enjoyable, but in some cases may actually be necessary to prevent discomfort in players. Let’s take a deeper look at each of these topics.

Brightness

When it comes to artificially created brightness, it can become a problem for those with low vision, especially through high contrast, like faux neon lettering. For players with reading disabilities, such as dyslexia, it may make it impossible to read any on-screen text. Many games already include some basic options that allow for changing brightness, but taking it to the next level isn’t much more difficult—and makes a world of difference for players.

A good solution is to include several brightness sliders for various parts of your game—for example, for overall brightness, text brightness, text background brightness, and HUD brightness. These alone will allow a majority of light-sensitive individuals to enjoy your game in a way that works for them. 

This can be implemented easily in most game engines by adding identifiers to groups of objects (such as implementing a variable called brightness, with types of “text_brightness” to determine which settings to use), and then using functionality that already exists to alter the brightness.

Contrast in Text

Color selection is an important part of ensuring appropriate contrast in your game. Adapting your visuals is especially important as it affects one of the largest demographics that we’ll cover: people that have lost contrast sensitivity though ageing. Beyond that, being able to clearly read text is important for many players in order to reduce eye strain.

To determine if your text color to background color contrast ratio is sufficient, use a tool like this calculator to help. In addition, offering a few options concerning text background and font colors will further expand the reach of your game, allowing for the inclusion of players that have difficulty with too much brightness or issues with contrast sensitivity.

Color Reliance

Because of the vast array of issues that can cause low vision, it’s impossible to plan for every edge-case. Luckily, humans are resourceful and are often able to communicate visually without text. 

To maximize the accessibility of your game, consider utilizing other visual displays or even other senses. When text appears on the screen, pairing it with a uniquely identifying sound as well as a symbol will depict your intention universally when done right. 

A good example of this combination occurs in the Metal Gear series, which regularly communicates soldier alertness through the use of a large exclamation point paired with the signature alert sound.

Text Tracking

Tracking refers to two distinct parts of reading. The first is the ability to follow along a line of text from beginning to end, and the second is following from the end of one line of text to the beginning of the next. Although this may seem like a typical part of reading for most users, if you’ve ever gotten lost on a particularly cluttered page then you’ve had an issue with text tracking.

Avoiding Multiple Columns

When displaying text, it’s important to place it into a single column whenever possible. Two separate sections of text can be placed side-by-side for formatting purposes, but for a singular text, continuing into a second column can be troublesome to navigate. This becomes doubly true for games that are playable through web browsers, as the second column may not display in the proper order for people using assistive devices.

Line Length

Ever play a game or read an article on a TV with one very long line of text? It’s difficult to read, and if long lines are stacked, getting from one line to the next can be tedious. Beyond that, many players have a limited range of vision, so in order to read the entire text, they will need to move their head several times per line.

Creating a solution for this can take a bit of work, since the best solution is to allow for the width of text boxes to be set. Implementing a slider to decide the width of the text box is fairly simple. However, adding the capability to take any piece of text and allow it to scroll varies depending on the framework or engine that you’re using.

Building Accessible Games Through a Culmination of Changes

While each of these changes may seem small, through their combination we begin to create a more accessible experience. A world of gaming where anyone can enjoy exploring vast, unknown worlds and intricate storylines. Beyond that, designing this type of usability into your game’s world makes the experience more enjoyable for all users. 

Implementing changes like these is often thankless, and many players won’t realize they are even there. But the few that do will be thankful for one less headache—and one less squint. These types of systems are what make the difference between a game that is complete and a game that is highly polished.

Accessibility Takeaways

We covered a lot of ground, so let’s condense all of this into a short list of solutions.

Handling Brightness: A simple brightness slider can go a long way here, and using multiple brightness sliders for different layers (HUD, text background, text, etc.) is ideal.

Contrast in Text: Use a ratio calculator to determine if the contrast in your text is adequate. Alternatively (or in addition to), let users swap text background and font colors when possible.

Color Reliance: For major gameplay events, pair them with other auditory and visual signifiers when possible.

Multiple Columns: Avoid dividing a single text into multiple columns.

Line Length: Allow the user to adjust the width of text boxes for dense areas, especially for games that might be played on wide screens.

Wrapping Up

This is just the tip of the iceberg when it comes to accessibility, with many more potential changes available throughout your game. Implementing these changes brings many pressing questions into play for indie developers. 

How accessible should a game be? Where is the balance between the art of presentation and accessibility? Let me know your thoughts in the comments below!

In my Beginner's Guide to Shaders I focused exclusively on fragment shaders, which is enough for any 2D effect and every ShaderToy example. But there's a whole category of techniques that require vertex shaders. This tutorial will walk you through creating stylized toon water while introducing vertex shaders. I will also introduce the depth buffer and how to use that to get more information about your scene and create foam lines.

Here's what the final effect should look like. You can try a live demo here (left mouse to orbit, right mouse to pan, scroll wheel to zoom).

Specifically, this effect is composed of:

1. A subdivided translucent water mesh with displaced vertices to make waves.
   
2. Static water lines on the surface.
   
3. Fake buoyancy on the boats.
   
4. Dynamic foam lines around the edge of objects in the water.
5. A post-process distortion of everything underwater.
   

What I like about this effect is that it touches on a lot of different concepts in computer graphics, so it will allow us to draw on ideas from past tutorials, as well as developing techniques we can use for a variety of future effects.

I'll be using PlayCanvas for this just because it has a convenient free web-based IDE, but everything should be applicable to any environment running WebGL. You can find a Three.js version of the source code at the end. I'll be assuming you're comfortable using fragment shaders and navigating the PlayCanvas interface. You can brush up on shaders here and skim an intro to PlayCanvas here.

Environment Setup

The goal of this section is to set up our PlayCanvas project and place some environment objects to test the water against. 

If you don't already have an account with PlayCanvas, sign up for one and create a new blank project. By default, you should have a couple of objects, a camera and a light in your scene.

Inserting Models

Google's Poly project is a really great resource for 3D models for the web. Here is the boat model I used. Once you download and unzip that, you should find a .obj and a .png file.

1. Drag both files into the asset window in your PlayCanvas project.
2. Select the material that was automatically created, and set its diffuse map to the .png file.
   

Now you can drag the Tugboat.json into your scene and delete the Box and Plane objects. You can scale the boat up if it looks too small (I set mine to 50).

You can add any other models to your scene in the same way.

Orbit Camera

To set up an orbit camera, we'll copy a script from this PlayCanvas example. Go to that link, and click on Editor to enter the project.

1. Copy the contents of mouse-input.js and orbit-camera.js from that tutorial project into the files of the same name in your own project.
2. Add a Script component to your camera.
3. Attach the two scripts to the camera.
   

Tip: You can create folders in the asset window to keep things organized. I put these two camera scripts under Scripts/Camera/, my model under Models/, and my material under Materials/.

Now, when you launch the game (play button on the top right of the scene view), you should be able to see your boat and orbit around it with the mouse. 

Subdivided Water Surface

The goal of this section is to generate a subdivided mesh to use as our water surface.

To generate the water surface, we're going to adapt some code from this terrain generation tutorial. Create a new script file called Water.js. Edit this script and create a new function called GeneratePlaneMesh that looks like this:

Water.prototype.GeneratePlaneMesh = function(options){
    // 1 - Set default options if none are provided 
    if(options === undefined)
        options = {subdivisions:100, width:10, height:10};
    // 2 - Generate points, uv's and indices 
    var positions = [];
    var uvs = [];
    var indices = [];
    var row, col;
    var normals;

    for (row = 0; row <= options.subdivisions; row++) {
        for (col = 0; col <= options.subdivisions; col++) {
            var position = new pc.Vec3((col * options.width) / options.subdivisions - (options.width / 2.0), 0, ((options.subdivisions - row) * options.height) / options.subdivisions - (options.height / 2.0));
            positions.push(position.x, position.y, position.z);
            uvs.push(col / options.subdivisions, 1.0 - row / options.subdivisions);
        }
    }

    for (row = 0; row < options.subdivisions; row++) {
        for (col = 0; col < options.subdivisions; col++) {
            indices.push(col + row * (options.subdivisions + 1));
            indices.push(col + 1 + row * (options.subdivisions + 1));
            indices.push(col + 1 + (row + 1) * (options.subdivisions + 1));

            indices.push(col + row * (options.subdivisions + 1));
            indices.push(col + 1 + (row + 1) * (options.subdivisions + 1));
            indices.push(col + (row + 1) * (options.subdivisions + 1));
        }
    }
    
    // Compute the normals 
    normals = pc.calculateNormals(positions, indices);

    
    // Make the actual model
    var node = new pc.GraphNode();
    var material = new pc.StandardMaterial();
   
    // Create the mesh 
    var mesh = pc.createMesh(this.app.graphicsDevice, positions, {
        normals: normals,
        uvs: uvs,
        indices: indices
    });

    var meshInstance = new pc.MeshInstance(node, mesh, material);
    
    // Add it to this entity 
    var model = new pc.Model();
    model.graph = node;
    model.meshInstances.push(meshInstance);
    
    this.entity.addComponent('model');
    this.entity.model.model = model;
    this.entity.model.castShadows = false; // We don't want the water surface itself to cast a shadow 
};

Now you can call this in the initialize function:

Water.prototype.initialize = function() {
    this.GeneratePlaneMesh({subdivisions:100, width:10, height:10});
};

You should see just a flat plane when you launch the game now. But this is not just a flat plane. It's a mesh composed of a thousand vertices. As a challenge, try to verify this (it's a good excuse to read through the code you just copied). 

Challenge #1: Displace the Y coordinate of each vertex by a random amount to get the plane to look something like the image below.

Waves

The goal of this section is to give the water surface a custom material and create animated waves.

To get the effects we want, we need to set up a custom material. Most 3D engines will have some pre-defined shaders for rendering objects and a way to override them. Here's a good reference for doing this in PlayCanvas.

Attaching a Shader

Let's create a new function called CreateWaterMaterial that defines a new material with a custom shader and returns it:

Water.prototype.CreateWaterMaterial = function(){
    // Create a new blank material  
    var material = new pc.Material();
    // A name just makes it easier to identify when debugging 
    material.name = "DynamicWater_Material";
    // Create the shader definition 
    // dynamically set the precision depending on device.
    var gd = this.app.graphicsDevice;
    var fragmentShader = "precision " + gd.precision + " float;\n";
    fragmentShader = fragmentShader + this.fs.resource;
    var vertexShader = this.vs.resource;

    // A shader definition used to create a new shader.
    var shaderDefinition = {
        attributes: {           
            aPosition: pc.gfx.SEMANTIC_POSITION,
            aUv0: pc.SEMANTIC_TEXCOORD0,
        },
        vshader: vertexShader,
        fshader: fragmentShader
    };
    
    // Create the shader from the definition
    this.shader = new pc.Shader(gd, shaderDefinition);
    
    // Apply shader to this material 
    material.setShader(this.shader);
    
    return material;
};

This function grabs the vertex and fragment shader code from the script attributes. So let's define those at the top of the file (after the pc.createScript line):

Water.attributes.add('vs', {
    type: 'asset',
    assetType: 'shader',
    title: 'Vertex Shader'
});

Water.attributes.add('fs', {
    type: 'asset',
    assetType: 'shader',
    title: 'Fragment Shader'
});

Now we can create these shader files and attach them to our script. Go back to the editor, and create two new shader files: Water.frag and Water.vert. Attach these shaders to your script as shown below.

If the new attributes don't show up in the editor, click the Parse button to refresh the script.

Now put this basic shader in Water.frag:

void main(void)
{
    vec4 color = vec4(0.0,0.0,1.0,0.5);
    gl_FragColor = color;
}

And this in Water.vert:

attribute vec3 aPosition;

uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;

void main(void)
{
    gl_Position = matrix_viewProjection * matrix_model * vec4(aPosition, 1.0);
}

Finally, go back to Water.js and make it use our new custom material instead of the standard material. So instead of:

var material = new pc.StandardMaterial();

Do:

var material = this.CreateWaterMaterial();

Now, if you launch the game, the plane should now be blue.

Hot Reloading

So far, we've just set up some dummy shaders on our new material. Before we get to writing the real effects, one last thing I want to set up is automatic code reloading.

Uncommenting the swap function in any script file (such as Water.js) enables hot-reloading. We'll see how to use this later to maintain the state even as we update the code in real time. But for now we just want to re-apply the shaders once we've detected a change. Shaders get compiled before they are run in WebGL, so we'll need to recreate the custom material to trigger this.

We're going to check if the contents of our shader code have been updated and, if so, recreate the material. First, save the current shaders in the initialize:

// initialize code called once per entity
Water.prototype.initialize = function() {
    this.GeneratePlaneMesh();
    // Save the current shaders 
    this.savedVS = this.vs.resource;
    this.savedFS = this.fs.resource;
};

And in the update, check if there have been any changes:

// update code called every frame
Water.prototype.update = function(dt) {
    if(this.savedFS != this.fs.resource || this.savedVS != this.vs.resource){
        // Re-create the material so the shaders can be recompiled 
        var newMaterial = this.CreateWaterMaterial();
        // Apply it to the model 
        var model = this.entity.model.model;
        model.meshInstances[0].material = newMaterial;  
        // Save the new shaders
        this.savedVS = this.vs.resource;
        this.savedFS = this.fs.resource;
    }
};

Now, to confirm this works, launch the game and change the color of the plane in Water.frag to a more tasteful blue. Once you save the file, it should update without having to refresh or relaunch! This was the color I chose:

vec4 color = vec4(0.0,0.7,1.0,0.5);

Vertex Shaders

To create waves, we need to move every vertex in our mesh every frame. This sounds as if it's going to be very inefficient, but every vertex of every model already gets transformed on each frame we render. This is what the vertex shader does. 

If you think of a fragment shader as a function that runs on every pixel, takes a position, and returns a color, then a vertex shader is a function that runs on every vertex, takes a position, and returns a position.

The default vertex shader will take the world position of a given model, and return the screen position. Our 3D scene is defined in terms of x, y, and z, but your monitor is a flat two-dimensional plane, so we project our 3D world onto our 2D screen. This projection is what the view, projection, and model matrices take care of and is outside of the scope of this tutorial, but if you want to learn exactly what happens at this step, here's a very nice guide.

So this line:

gl_Position = matrix_viewProjection * matrix_model * vec4(aPosition, 1.0);

Takes aPosition as the 3D world position of a particular vertex and transforms it into gl_Position, which is the final 2D screen position. The 'a' prefix on aPosition is to signify that this value is an attribute. Remember that a uniformvariable is a value we can define on the CPU to pass to a shader that retains the same value across all pixels/vertices. An attribute's value, on the other hand, comes from an array defined on the CPU. The vertex shader is called once for each value in that attribute array.

You can see these attributes are set up in the shader definition we set up in Water.js:

var shaderDefinition = {
    attributes: {           
        aPosition: pc.gfx.SEMANTIC_POSITION,
        aUv0: pc.SEMANTIC_TEXCOORD0,
    },
    vshader: vertexShader,
    fshader: fragmentShader
};

PlayCanvas takes care of setting up and passing an array of vertex positions for aPosition when we pass this enum, but in general you could pass any array of data to the vertex shader.

Moving the Vertices

Let's say you want to squish the plane by multiplying all x values by half. Should you change aPositionor gl_Position?

Let's try aPosition first. We can't modify an attribute directly, but we can make a copy:

attribute vec3 aPosition;

uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;

void main(void)
{
    vec3 pos = aPosition;
    pos.x *= 0.5;
    
    gl_Position = matrix_viewProjection * matrix_model * vec4(pos, 1.0);    
}

The plane should now look more rectangular. Nothing strange there. Now what happens if we instead try modifying gl_Position?

attribute vec3 aPosition;

uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;

void main(void)
{
    vec3 pos = aPosition;
    //pos.x *= 0.5;
    
    gl_Position = matrix_viewProjection * matrix_model * vec4(pos, 1.0);    
    gl_Position.x *= 0.5;
}

It might look the same until you start to rotate the camera. We're modifying screen space coordinates, which means it's going to look different depending on how you're looking at it.

So that's how you can move the vertices, and it's important to make this distinction between whether you're in world or screen space.

Challenge #2: Can you move the whole plane surface a few units up (along the Y axis) in the vertex shader without distorting its shape?

Challenge #3: I said gl_Position is 2D, but gl_Position.z does exist. Can you run some tests to determine if this value affects anything, and if so, what it's used for?

Adding Time

One last thing we need before we can create moving waves is a uniform variable to use as time. Declare a uniform in your vertex shader:

uniform float uTime;

Then, to pass this to our shader, go back to Water.js and define a time variable in the initialize:

Water.prototype.initialize = function() {
    this.time = 0; ///// First define the time here 
    this.GeneratePlaneMesh();
    // Save the current shaders 
    this.savedVS = this.vs.resource;
    this.savedFS = this.fs.resource;
};

Now, to pass this to our shader, we use material.setParameter. First we set an initial value at the end of the CreateWaterMaterial function:

// Create the shader from the definition
this.shader = new pc.Shader(gd, shaderDefinition);

////////////// The new part
material.setParameter('uTime',this.time);
this.material = material; // Save a reference to this material
////////////////

// Apply shader to this material 
material.setShader(this.shader);

return material;

Now in the updatefunction we can increment time and access the material using the reference we created for it:

this.time += 0.1; 
this.material.setParameter('uTime',this.time);

As a final step, in the swap function, copy over the old value of time, so that even if you change the code it'll continue incrementing without resetting to 0.

Water.prototype.swap = function(old) { 
    this.time = old.time;
};

Now everything is ready. Launch the game to make sure there are no errors. Now let's move our plane by a function of time in Water.vert:

pos.y += cos(uTime)

And your plane should be moving up and down now! Because we have a swap function now, you can also update Water.js without having to relaunch. Try making time increment faster or slower to confirm this works.

Challenge #4: Can you move the vertices so it looks like the wave below? 

As a hint, I talked in depth about different ways to create waves here. That was in 2D, but the same math applies here. If you'd rather just peek at the solution, here's the gist.

Translucency

The goal of this section is to make the water surface translucent.

You might have noticed that the color we're returning in Water.frag does have an alpha value of 0.5, but the surface is still completely opaque. Transparency in many ways is still an open problem in computer graphics. One cheap way to achieve it is to use blending.

Normally, when a pixel is about to be drawn, it checks the value in the depth buffer against its own depth value (its position along the Z axis) to determine whether to overwrite the current pixel on the screen or discard itself. This is what allows you to render a scene correctly without having to sort objects back to front. 

With blending, instead of simply discarding or overwriting, we can combine the color of the pixel that's already drawn (the destination) with the pixel that's about to be drawn (the source). You can see all the available blending functions in WebGL here.

To make the alpha work the way we expect it, we want the combined color of the result to be the source multiplied by the alpha plus the destination multiplied by one minus the alpha. In other words, if the alpha is 0.4, the final color should be:

finalColor = source * 0.4 + destination * 0.6;

In PlayCanvas, the pc.BLEND_NORMAL option does exactly this.

To enable this, just set the property on the material inside CreateWaterMaterial:

 material.blendType = pc.BLEND_NORMAL;

If you launch the game now, the water will be translucent! This isn't perfect, though. A problem arises if the translucent surface overlaps with itself, as shown below.

We can fix this by using alpha to coverage, which is a multi-sampling technique to achieve transparencyinstead of blending:

//material.blendType = pc.BLEND_NORMAL;
material.alphaToCoverage = true;

But this is only available in WebGL 2. For the remainder of this tutorial, I'll be using blending to keep it simple.

Summary

So far we've set up our environment and created our translucent water surface with animated waves from our vertex shader. The second part will cover applying buoyancy on objects, adding water lines to the surface, and creating the foam lines around the edges of objects that intersect the surface. 

The final part will cover applying the underwater post-process distortion effect and some ideas for where to go next.

Source Code

You can find the finished hosted PlayCanvas project here. A Three.js port is also available in this repository.

In the last article we saw where the need for storytelling comes from, which is something intrinsic to humankind, and we said that telling a story means basically to convey a messagein order to obtain a responsein our listener. 

We also started to examine the tools that we, as game designers, have available to learn how to tell stories. Finally, we mentioned the birth of interactive stories, typical of videogames. 

However, in order to thoroughly address this issue, we have to take a step back and start analysing the classic narrative (or passive narrative).

Passive Narrative

In the past, storytelling has traditionally been considered as a one-way relationship: the author of a story chooses a medium (book, theatrical play, movie, etc.) and uses it to tell a story that will be passively received by the audience.

But is it really like that?

Leaving aside the fact that in ancient times attempts were made to directly engage the public during theatrical performances (such as in experimental Greek theatre), passive narrative must actually be considered, more correctly, a two-stage narrative.

Because, if it is true that the author tells us a story to convey a message and to generate a response in us, then two different stages must be taken into account: reception and elaboration.

Whenever we assist a story, we are passive, it’s true. For example, while watching a movie in the theater, we’re usually sitting in the dark, in silence, ready to just “live” the experience that the director and the authors have prepared for us. This first stage, reception, is one-way: the author tells, we listen. We become receivers of the message from the author.

However, it’s not unusual to go out of the theater and talk about what we just watched, maybe with our friends or our partner. We comment on the movie, discuss our personal opinions (“I liked it”, “I got bored”, etc.), and often elaborate on the scenes, underlining the details we were most impressed by.

Therefore, we analyse the parts of the message from the author that were etched in our brains, the ones that have generated most of a response in us.

It doesn’t matter what kind of movie we just watched; this kind of after reception interaction happens anyway: whether it’s a comedy, drama, documentary or action movie, the second stage, the elaboration one, always happens. Even if we went to the movie by ourselves, we would think about particular scenes and elaborate on them.

The length and intensity of this stage, clearly, can vary depending on how much we liked the movie (that is to say, depending on how much the message from the author managed to create a response in us).

The most famous franchises in the world are the ones that push their fans to wonder and speculate, for example, in between movies, about a character's origins that haven’t been revealed yet. Thousands of Twitter messages, Facebook groups, YouTube videos, and Redditthreads, for example, have been created by fans after watching Star Wars Episode VII, proposing theories dealing with the mystery of Rey’s parents.

When we develop a passion for a story that excites us, it usually happens that we dedicate ten or a hundred times as much time to the second stage compared to the first one.

Let’s ask ourselves: why does this second stage even exist? Why does reading a book, closing it, putting it on our nightstand and forgetting about it not seem to be enough? Why do we want, instead, be directly involved, letting the suspension of disbelief make us live the responses that the author wants to create in us? And then why do we keep trying to interact with that story, reliving and analysing specific parts?

The keyword here is precisely interaction: it is one of the needs of humankind. Without going into too much detail about a complex field such as the human psyche (a field that, however, is increasingly being studied by game designers and authors of movies and books because it is obviously extremely useful in order to calibrate our messages and get exactly the desired responses), one of the fundamental parts of human personality is the ego. And it’s precisely our ego that makes us want to be in the center of the story, or pushes us to discover some contact points between the characters in a story and ourselves. It’s our ego that lets us relate to the characters and make our reactions to the story we’re being told so powerful that they become able to actually affect our reality.

Without the ego, we wouldn’t be moved by reading a dramatic book.

At the same time, the ego leads us to not want to play just a minor role in the story—that is to say, to be just a passive audience.

We want, by instinct, to be at the center of the scene (and let’s say that we are also living in a time in which society and technology push us in this direction). Thus, if we can’t edit the story while it’s being told to us, we wish to interact with it anyway, at a later stage.

One of the first authors who understood this mechanism was David Lynch. Perhaps one of the most important authors of the modern era, he is certainly the father of TV series as we know them today. In 1990, when David Lynch began telling the story of an unknown (and fictional) town in the northern United States, Twin Peaks, he was following a hunch: he created a mystery that engaged viewers all over the world and led them to look for a solution. 

The dreamlike puzzle created by Lynch and Frost (the other author of Twin Peaks) kept viewers glued to that story for two and a half years (and later for 30 solid years, because the fans never gave up on that unsolved mystery until the release of a very long-awaited third season just last year). The story brought viewers to interact among themselves: they shared theories and possible scenarios. For the first time in the history of television, the second stage became actually important and, clearly, contributed to the success of Lynch’s work.

Then how can we call this experience passive if, sometimes, the second stage lasts longer and is more intense than the first one?

You’ll agree with me that the definition is inadequate at least. However, it’s true that during the narration the audience is passive: throughout the duration of the transmission of the message from the author, whoever is receiving that message can only passively listen to it. The audience is not able to intervene in the events or shift their focus to minor details that look interesting to them. Furthermore, in the case of media such as cinema and theater, the audience doesn’t even have the chance to choose the narrative rhythm: the message from the author is shown in an unstoppable way, like a river in flood that overwhelms the viewers.

From this point of view, videogames are deeply different, and their interactive narration opens up countless possibilities that, before videogames became an established medium, used to be unthinkable.

The Evolution of Storytelling

It’s interesting to note how, looking at the videogame world, older media have always felt a little bit of envy. The authors of a movie or a TV series are clearly aware of how charming interaction can be for the audience, and they know that, generation after generation, classic storytelling is getting less and less appealing.

In the last 30 years, many attempts have been made to hybridize the classic nature of certain media, and some have been more successful than others.

One of the most famous attempts of this kind is the book series Choose Your Own Adventure: books where the story is made of forks in the road in which the reader/player can make choices and often fight against enemies or use a style of interaction very similar to that of tabletop role-playing games.

Another example is the eighties TV series Captain Power and the Soldiers of the Future that allowed players, using infra-red devices, to fight against the enemies on the screen and score points, and the player's action figure reacted based on the results.

A recent example is the interactive episode of Puss in Boots, published on Netflixand designed for tablet: it’s a cartoon for children with choices to make and forks in the road in the story.

I’m really curious about what will happen in the future in this respect.

What about you?

Interactive Storytelling

Now that we have looked at traditional (to a certain extent, passive) storytelling, it’s time to go into the very subject of these articles: interactive storytelling.

First of all, let's try to set things straight: are all games narrative?

To answer, let’s look at a few examples.

Chessis one of the oldest and most popular games in the world. It represents a conflict on a battlefield between two armies and, as many of you will know, chess and go are considered the most strategic games in the world.

However, is let’s simulate a battle enough to define chess as a narrative game?

No.

Because all the elements we highlighted as fundamental to narration are missing: the narrator is missing, and so is the message.

The same goes for videogames.

There are completely abstract games (like Tetris) and games in which storytelling is a simple expedient for the setting of the game. Consider Super Mario Bros, in its first version. There was a basic story (Bowser has kidnapped Princess Peach and Mario must save her). But there’s no actual storytelling, no narrator, no message.

There are responses, but they are directly provoked by gameplay. In fact, taking away the story from Super Mario Bros doesn’t affect the user experience at all.

The lack of any actual storytelling, however, doesn’t invalidate the quality of the game. On the other hand, adding narration to the structure of the game as it is would probably burden the experience and ruin the perfect balance of the design.

Not for nothing, even though in more modern Super Mario games texts and cut-scenes have appeared, the story keeps working as a mere expedient, as a corollary to the gameplay.

When we as designers, therefore, start approaching the design of a new game, we have to ask ourselves a couple of questions:

1. Does my story (my message) need interactive storytelling?
2. How can interactive storytelling improve my story?

Answering these questions in the first place will let us understand if and how to include interactive storytelling in our game.

We may realise that a simple story used as an expedient is enough, or that the game doesn’t need a story at all! The assumption that any modern game should have interactive storytelling is a mistake we have to avoid.

If, instead, the answers are positive, then it’s time to learn how to master the art of interactive storytelling.

Linear Interactive Storytelling

The first kind of interactive storytelling that we are going to consider is the linearone. This definition might, at first sight, appear to be counterintuitive, but it’s actually the most common kind of interactive storytelling.

Videogames using this kind of storytelling allow the player to interact with the events, choosing the narrative rhythm (in the case, for example, of a quest that won’t proceed without the player’s intervention), choosing the order in which to go through the events (for example, when there are two parallel quests active at the same time and the player can decide which one to complete first), or setting the desired level of accuracy (for example, when reading documents and clues in a game is not mandatory but increases the player’s knowledge about the story or the game’s setting).

However, as much as the player feels free, the story is eventually going precisely how the author meant.

It’s as if the game designer had taken his message and split it into many different pieces to be put together by the player.

Developing this kind of interaction is clearly more complicated than classic storytelling: certain tricks of the trade commonly used in book-writing, for example, cannot be used here. 

Consider this game with a linear interactive storytelling (maybe one of the most famous in the world): The Secret of Monkey Island. It allows players, on a number of occasions, to explore the story and interact with it in the order and rhythm they prefer. There are at least two large open sections where players have multiple tasks to do, following their own hunches and preferences.

A more recent example is The Legend of Zelda: Breath of the Wild, in which the story is told through flashbacks but it is up to the player to decide which parts of the game will be handled first and thus which pieces of the puzzle will be put together first.

Each part of the story, however, had been written in order to coexist without contradicting or hindering each other.

There’s no need to deal with this kind of problem when writing a book.

In order to be sure to create a correct interaction, therefore, a game designer has to use certain tools.

When writing a book, one often takes notes and sketches diagrams. Not all authors, I know, take this approach. Some of them are way more spontaneous: they sit in front of the keyboard and start writing.

But when you’re dealing with interactive storytelling, the spontaneous approach is simply not feasible: outlining the story, using flow charts, creating tables and summaries about every character of the story is the necessary starting point.

All these documents, in fact, will be part of the Game Design Document (GDD), which contains all the elements of the game.

Writing this kind of story, without losing track or making mistakes, is definitely complicated. The more diagrams and notes you’ve got, the more you’ll limit the risk of mistakes.

But it won’t be enough.

When writers finish their work, they will usually hand it to a proofreader who will thoroughly read it and point out mistakes and inconsistencies in the text. Likewise, designers will have to entrust their work to a QA department, made of different people that will check the story and test in a systematic way all cases of interaction—looking for every possible loophole.

Conclusion

And yet… what if we want more? What if we want to give the players the freedom to affect the events and make their experience even more intimate and personal, providing each player with a different response?

In this case we would have to resort to non-linear interactive storytelling that, along with the direct method and the indirect method, will be the subject of the third and last article of this series.

Welcome back to this three-part series on creating stylized toon water in PlayCanvas using vertex shaders. In Part 1, we covered setting up our environment and water surface. This part will cover applying buoyancy to objects, adding water lines to the surface, and creating the foam lines with the depth buffer around the edges of objects that intersect the surface. 

I made some small changes to my scene to make it look a little nicer. You can customize your scene however you like, but what I did was:

• Added the lighthouse and the octopus models.
• Added a ground plane with color #FFA457. 
• Added a clear color for the camera of #6CC8FF.
• Added an ambient color to the scene of #FFC480 (you can find this in the scene settings).
  

Below is what my starting point now looks like.

Buoyancy 

The most straightforward way to create buoyancy is just to create a script that will push objects up and down. Create a new script called Buoyancy.js and set its initialize to:

Buoyancy.prototype.initialize = function() {
    this.initialPosition = this.entity.getPosition().clone();
    this.initialRotation = this.entity.getEulerAngles().clone();
    // The initial time is set to a random value so that if
    // this script is attached to multiple objects they won't 
    // all move the same way
    this.time = Math.random() * 2 * Math.PI;
};

Now, in the update, we increment time and rotate the object:

Buoyancy.prototype.update = function(dt) {
    this.time += 0.1;
    // Move the object up and down 
    var pos = this.entity.getPosition().clone();
    pos.y = this.initialPosition.y + Math.cos(this.time) * 0.07;
    this.entity.setPosition(pos.x,pos.y,pos.z);
    // Rotate the object slightly 
    var rot = this.entity.getEulerAngles().clone();
    rot.x = this.initialRotation.x + Math.cos(this.time * 0.25) * 1;
    rot.z = this.initialRotation.z + Math.sin(this.time * 0.5) * 2;
    this.entity.setLocalEulerAngles(rot.x,rot.y,rot.z);
};

Apply this script to your boat and watch it bobbing up and down in the water! You can apply this script to several objects (including the camera—try it)!

Texturing the Surface

Right now, the only way you can see the waves is by looking at the edges of the water surface. Adding a texture helps make motion on the surface more visible and is a cheap way to simulate reflections and caustics.

You can try to find some caustics texture or make your own. Here's one I drew in Gimp that you can freely use. Any texture will work as long as it can be tiled seamlessly.

Once you've found a texture you like, drag it into your project's asset window. We need to reference this texture in our Water.js script, so create an attribute for it:

Water.attributes.add('surfaceTexture', {
    type: 'asset',
    assetType: 'texture',
    title: 'Surface Texture'
});

And then assign it in the editor:

Now we need to pass it to our shader. Go to Water.js and set a new parameter in the CreateWaterMaterial function:

material.setParameter('uSurfaceTexture',this.surfaceTexture.resource);

Now go into Water.frag and declare our new uniform:

uniform sampler2D uSurfaceTexture;

We're almost there. To render the texture onto the plane, we need to know where each pixel is along the mesh. Which means we need to pass some data from the vertex shader to the fragment shader.

Varying Variables

A varyingvariable allows you to pass data from the vertex shader to the fragment shader. This is the third type of special variable you can have in a shader (the other two being uniformand attribute). It is defined for each vertex and is accessible by each pixel. Since there are a lot more pixels than vertices, the value is interpolated between vertices (this is where the name "varying" comes from—it varies from the values you give it).

To try this out, declare a new variable in Water.vert as a varying:

varying vec2 ScreenPosition;

And then set it to gl_Position after it's been computed:

ScreenPosition = gl_Position.xyz;

Now go back to Water.frag and declare the same variable. There's no way to get some debug output from within a shader, but we can use color to visually debug. Here's one way to do this:

uniform sampler2D uSurfaceTexture;
varying vec3 ScreenPosition;

void main(void)
{
    vec4 color = vec4(0.0,0.7,1.0,0.5);
    
    // Testing out our new varying variable
    color = vec4(vec3(ScreenPosition.x),1.0);
    
    gl_FragColor = color;
}

The plane should now look black and white, where the line separating them is where ScreenPosition.x is 0. Color values only go from 0 to 1, but the values in ScreenPosition can be outside this range. They get automatically clamped, so if you're seeing black, that could be 0, or negative.

What we've just done is passed the screen position of every vertex to every pixel. You can see that the line separating the black and white sides is always going to be in the center of the screen, regardless of where the surface actually is in the world.

Challenge #1: Create a new varying variable to pass the world position instead of the screen position. Visualize it in the same way as we did above. If the color doesn't change with the camera, then you've done this correctly.

Using UVs 

The UVs are the 2D coordinates for each vertex along the mesh, normalized from 0 to 1. This is exactly what we need to sample the texture onto the plane correctly, and it should already be set up from the previous part.

Declare a new attribute in Water.vert (this name comes from the shader definition in Water.js):

attribute vec2 aUv0;

And all we need to do is pass it to the fragment shader, so just create a varying and set it to the attribute:

// In Water.vert
// We declare this along with our other variables at the top
varying vec2 vUv0;

// ..
// Down in the main function, we store the value of the attribute 
// in the varying so that the frag shader can access it 
vUv0 = aUv0;

Now we declare the same varying in the fragment shader. To verify it works, we can visualize it as before, so that Water.frag now looks like:

uniform sampler2D uSurfaceTexture;
varying vec2 vUv0;

void main(void)
{
    vec4 color = vec4(0.0,0.7,1.0,0.5);
    
    // Confirming UV's 
    color = vec4(vec3(vUv0.x),1.0);
    
    gl_FragColor = color;
}

And you should see a gradient, confirming that we have a value of 0 at one end and 1 at the other. Now, to actually sample our texture, all we have to do is:

color = texture2D(uSurfaceTexture,vUv0);

And you should see the texture on the surface:

Stylizing the Texture

Instead of just setting the texture as our new color, let's combine it with the blue we had:

uniform sampler2D uSurfaceTexture;
varying vec2 vUv0;

void main(void)
{
    vec4 color = vec4(0.0,0.7,1.0,0.5);
    
    vec4 WaterLines = texture2D(uSurfaceTexture,vUv0);
    color.rgba += WaterLines.r;
    
    gl_FragColor = color;
}

This works because the color of the texture is black (0) everywhere except for the water lines. By adding it, we don't change the original blue color except for the places where there are lines, where it becomes brighter. 

This isn't the only way to combine the colors, though.

Challenge #2: Can you combine the colors in a way to get the subtler effect shown below?

Moving the Texture

As a final effect, we want the lines to move along the surface so it doesn't look so static. To do this, we use the fact that any value given to the texture2D function outside the 0 to 1 range will wrap around (such that 1.5 and 2.5 both become 0.5). So we can increment our position by the time uniform variable we already set up and multiply the position to either increase or decrease the density of the lines in our surface, making our final frag shader look like this:

uniform sampler2D uSurfaceTexture;
uniform float uTime;
varying vec2 vUv0;

void main(void)
{
    vec4 color = vec4(0.0,0.7,1.0,0.5);
    
    vec2 pos = vUv0;
    // Multiplying by a number greater than 1 causes the 
    // texture to repeat more often 
    pos *= 2.0;
    // Displacing the whole texture so it moves along the surface
    pos.y += uTime * 0.02;
    
    vec4 WaterLines = texture2D(uSurfaceTexture,pos);
    color.rgba += WaterLines.r;
    
    gl_FragColor = color;
}

Foam Lines & the Depth Buffer

Rendering foam lines around objects in water makes it far easier to see how objects are immersed and where they cut the surface. It also makes our water look a lot more believable. To do this, we need to somehow figure out where the edges are on each object, and do this efficiently.

The Trick

What we want is to be able to tell, given a pixel on the surface of the water, whether it's close to an object. If so, we can color it as foam. There's no straightforward way to do this (that I know of). So to figure this out, we're going to use a helpful problem-solving technique: come up with an example we know the answer to, and see if we can generalize it. 

Consider the view below.

Which pixels should be part of the foam? We know it should look something like this:

So let's think about two specific pixels. I've marked two with stars below. The black one is in the foam. The red one is not. How can we tell them apart inside a shader?

What we know is that even though those two pixels are close together in screen space (both are rendered right on top of the lighthouse body), they're actually far apart in world space. We can verify this by looking at the same scene from a different angle, as shown below.

Notice that the red star isn't on top of the lighthouse body as it appeared, but the black star actually is. We can tell them apart using the distance to the camera, commonly referred to as "depth", where a depth of 1 means it's very close to the camera and a depth of 0 means it's very far.  But it's not just a matter of the absolute world distance, or depth, to the camera. It's the depth compared to the pixel behind.

Look back to the first view. Let's say the lighthouse body has a depth value of 0.5. The black star's depth would be very close to 0.5. So it and the pixel behind it have similar depth values. The red star, on the other hand, would have a much larger depth, because it would be closer to the camera, say 0.7. And yet the pixel behind it, still on the lighthouse, has a depth value of 0.5, so there's a bigger difference there.

This is the trick. When the depth of the pixel on the water surface is close enough to the depth of the pixel it's drawn on top of, we're pretty close to the edge of something, and we can render it as foam. 

So we need more information than is available in any given pixel. We somehow need to know the depth of the pixel that it's about to be drawn on top of. This is where the depth buffer comes in.

The Depth Buffer

You can think of a buffer, or a framebuffer, as just an off-screen render target, or a texture. You would want to render off-screen when you're trying to read data back, a technique that this smoke effect employs.

The depth buffer is a special render target that holds information about the depth values at each pixel. Remember that the value in gl_Position computed in the vertex shader was a screen space value, but it also had a third coordinate, a Z value. This Z value is used to compute the depth which is written to the depth buffer. 

The purpose of the depth buffer is to draw our scene correctly, without the need to sort objects back to front. Every pixel that is about to be drawn first consults the depth buffer. If its depth value is greater than the value in the buffer, it is drawn, and its own value overwrites the one in the buffer. Otherwise, it is discarded (because it means another object is in front of it).

You can actually turn off writing to the depth buffer to see how things would look without it. You can try this in Water.js:

material.depthTest = false;

You'll see how the water will always be rendered on top, even if it is behind opaque objects.

Visualizing the Depth Buffer

Let's add a way to visualize the depth buffer for debugging purposes. Create a new script called DepthVisualize.js. Attach this to your camera. 

All we have to do to get access to the depth buffer in PlayCanvas is to say:

this.entity.camera.camera.requestDepthMap();

This will then automatically inject a uniform into all of our shaders that we can use by declaring it as:

uniform sampler2D uDepthMap;

Below is a sample script that requests the depth map and renders it on top of our scene. It's set up for hot-reloading. 

var DepthVisualize = pc.createScript('depthVisualize');

// initialize code called once per entity
DepthVisualize.prototype.initialize = function() {
    this.entity.camera.camera.requestDepthMap();
    this.antiCacheCount = 0; // To prevent the engine from caching our shader so we can live-update it 
    
    this.SetupDepthViz();
};

DepthVisualize.prototype.SetupDepthViz = function(){
    var device = this.app.graphicsDevice;
    var chunks = pc.shaderChunks;
    
    this.fs = '';
    this.fs += 'varying vec2 vUv0;';
    this.fs += 'uniform sampler2D uDepthMap;';
    this.fs += '';
    this.fs += 'float unpackFloat(vec4 rgbaDepth) {';
    this.fs += '    const vec4 bitShift = vec4(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0);';
    this.fs += '    float depth = dot(rgbaDepth, bitShift);';
    this.fs += '    return depth;';
    this.fs += '}';
    this.fs += '';
    this.fs += 'void main(void) {';
    this.fs += '    float depth = unpackFloat(texture2D(uDepthMap, vUv0)) * 30.0; ';
    this.fs += '    gl_FragColor = vec4(vec3(depth),1.0);';
    this.fs += '}';
        
    this.shader = chunks.createShaderFromCode(device, chunks.fullscreenQuadVS, this.fs, "renderDepth" + this.antiCacheCount);
    this.antiCacheCount ++;
    
    // We manually create a draw call to render the depth map on top of everything 
    this.command = new pc.Command(pc.LAYER_FX, pc.BLEND_NONE, function () {
       pc.drawQuadWithShader(device, null, this.shader);
    }.bind(this));
    this.command.isDepthViz = true; // Just mark it so we can remove it later

    this.app.scene.drawCalls.push(this.command);
};

// update code called every frame
DepthVisualize.prototype.update = function(dt) {
    
};

// swap method called for script hot-reloading
// inherit your script state here
DepthVisualize.prototype.swap = function(old) { 
    this.antiCacheCount = old.antiCacheCount;
    
    // Remove the depth viz draw call 
    for(var i=0;i<this.app.scene.drawCalls.length;i++){
        if(this.app.scene.drawCalls[i].isDepthViz){
            this.app.scene.drawCalls.splice(i,1);
            break;
        }
    } 
    // Recreate it 
    this.SetupDepthViz();
};

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

Try copying that in, and comment/uncomment the line this.app.scene.drawCalls.push(this.command); to toggle the depth rendering. It should look something like the image below.

Challenge #3: The water surface is not drawn into the depth buffer. The PlayCanvas engine does this intentionally. Can you figure out why? What's special about the water material? To put it another way, based on our depth checking rules, what would happen if the water pixels did write to the depth buffer?

Hint: There is one line you can change in Water.js that will cause the water to be written to the depth buffer.

Another thing to notice is that I multiply the depth value by 30 in the embedded shader in the initialize function. This is just to be able to see it clearly, because otherwise the range of values are too small to see as shades of color.

Implementing the Trick

The PlayCanvas engine includes a bunch of helper functions to work with depth values, but at the time of writing they aren't released into production, so we're just going to set these up ourselves.

Define the following uniforms to Water.frag:

// These uniforms are all injected automatically by PlayCanvas
uniform sampler2D uDepthMap;
uniform vec4 uScreenSize;
uniform mat4 matrix_view;
// We have to set this one up ourselves
uniform vec4 camera_params;

Define these helper functions above the main function:

#ifdef GL2
    float linearizeDepth(float z) {
        z = z * 2.0 - 1.0;
        return 1.0 / (camera_params.z * z + camera_params.w);
    }
#else
    #ifndef UNPACKFLOAT
    #define UNPACKFLOAT
    float unpackFloat(vec4 rgbaDepth) {
        const vec4 bitShift = vec4(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0);
        return dot(rgbaDepth, bitShift);
    }
    #endif
#endif

float getLinearScreenDepth(vec2 uv) {
    #ifdef GL2
        return linearizeDepth(texture2D(uDepthMap, uv).r) * camera_params.y;
    #else
        return unpackFloat(texture2D(uDepthMap, uv)) * camera_params.y;
    #endif
}

float getLinearDepth(vec3 pos) {
    return -(matrix_view * vec4(pos, 1.0)).z;
}

float getLinearScreenDepth() {
    vec2 uv = gl_FragCoord.xy * uScreenSize.zw;
    return getLinearScreenDepth(uv);
}

Pass some information about the camera to the shader in Water.js. Put this where you pass other uniforms like uTime:

if(!this.camera){
    this.camera = this.app.root.findByName("Camera").camera;
}
var camera = this.camera; 
var n = camera.nearClip;
var f = camera.farClip;
var camera_params = [
    1/f,
    f,
    (1-f / n) / 2,
    (1 + f / n) / 2
];
material.setParameter('camera_params', camera_params);

Finally, we need the world position for each pixel in our frag shader. We need to get this from the vertex shader. So define a varying in Water.frag:

varying vec3 WorldPosition;

Define the same varying in Water.vert. Then set it to the distorted position in the vertex shader, so the full code would look like:

attribute vec3 aPosition;
attribute vec2 aUv0;

varying vec2 vUv0;
varying vec3 WorldPosition;

uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;

uniform float uTime;

void main(void)
{
    vUv0 = aUv0;   
    vec3 pos = aPosition;

    pos.y +=  cos(pos.z*5.0+uTime) * 0.1 * sin(pos.x * 5.0 + uTime);
    
    gl_Position = matrix_viewProjection * matrix_model * vec4(pos, 1.0);    
    
    WorldPosition = pos;
}

Actually Implementing the Trick

Now we're finally ready to implement the technique described at the beginning of this section. We want to compare the depth of the pixel we're at to the depth of the pixel behind it. The pixel we're at comes from the world position, and the pixel behind comes from the screen position. So grab these two depths:

float worldDepth = getLinearDepth(WorldPosition);
float screenDepth = getLinearScreenDepth();

Challenge #4: One of these values will never be greater than the other (assuming depthTest = true). Can you deduce which?

We know the foam is going to be where the distance between these two values is small. So let's render that difference at each pixel. Put this at the bottom of your shader (and make sure the depth visualization script from the previous section is turned off):

color = vec4(vec3(screenDepth - worldDepth),1.0);
gl_FragColor = color;

Which should look something like this:

Which correctly picks out the edges of any object immersed in water in real time! You can of course scale this difference we're rendering to make the foam look thicker/thinner.

There are now a lot of ways in which you can combine this output with the water surface color to get nice-looking foam lines. You could keep it as a gradient, use it to sample from another texture, or set it to a specific color if the difference is less than or equal to some threshold.

My favorite look is setting it to a color similar to that of the static water lines, so my final main function looks like this:

void main(void)
{
    vec4 color = vec4(0.0,0.7,1.0,0.5);
    vec2 pos = vUv0 * 2.0;
    pos.y += uTime * 0.02;
    vec4 WaterLines = texture2D(uSurfaceTexture,pos);
    color.rgba += WaterLines.r * 0.1;
    float worldDepth = getLinearDepth(WorldPosition);
    float screenDepth = getLinearScreenDepth();
    float foamLine = clamp((screenDepth - worldDepth),0.0,1.0) ;
    if(foamLine < 0.7){
        color.rgba += 0.2;
    }
    gl_FragColor = color;
}

Summary

We created buoyancy on objects floating in the water, we gave our surface a moving texture to simulate caustics, and we saw how we could use the depth buffer to create dynamic foam lines.

To finish this up, the next and final part will introduce post-process effects and how to use them to create the underwater distortion effect.

Source Code

You can find the finished hosted PlayCanvas project here. A Three.js port is also available in this repository.

Welcome back to this three-part series on creating stylized toon water in PlayCanvas using vertex shaders. In Part 2 we covered buoyancy & foam lines. In this final part, we're going to apply the underwater distortion as a post-process effect.

Refraction & Post-Process Effects

Our goal is to visually communicate the refraction of light through water. We've already covered how to create this sort of distortion in a fragment shader in a previous tutorial for a 2D scene. The only difference here is that we'll need to figure out which area of the screen is underwater and only apply the distortion there. 

Post-Processing

In general, a post-process effect is anything applied to the whole scene after it is rendered, such as a colored tint or an old CRT screen effect. Instead of rendering your scene directly to the screen, you first render it to a buffer or texture, and then render that to the screen, passing through a custom shader.

In PlayCanvas, you can set up a post-process effect by creating a new script. Call it Refraction.js, and copy this template to start with:

//--------------- POST EFFECT DEFINITION------------------------//
pc.extend(pc, function () {
    // Constructor - Creates an instance of our post effect
    var RefractionPostEffect = function (graphicsDevice, vs, fs, buffer) {
        var fragmentShader = "precision " + graphicsDevice.precision + " float;\n";
        fragmentShader = fragmentShader + fs;
        // this is the shader definition for our effect
        this.shader = new pc.Shader(graphicsDevice, {
            attributes: {
                aPosition: pc.SEMANTIC_POSITION
            },
            vshader: vs,
            fshader: fs
        });
        this.buffer =  buffer; 
    };

    // Our effect must derive from pc.PostEffect
    RefractionPostEffect = pc.inherits(RefractionPostEffect, pc.PostEffect);

    RefractionPostEffect.prototype = pc.extend(RefractionPostEffect.prototype, {
        // Every post effect must implement the render method which
        // sets any parameters that the shader might require and
        // also renders the effect on the screen
        render: function (inputTarget, outputTarget, rect) {
            var device = this.device;
            var scope = device.scope;

            // Set the input render target to the shader. This is the image rendered from our camera
            scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);            

            // Draw a full screen quad on the output target. In this case the output target is the screen.
            // Drawing a full screen quad will run the shader that we defined above
            pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
        }
    });

    return {
        RefractionPostEffect: RefractionPostEffect
    };
}());

//--------------- SCRIPT DEFINITION------------------------//
var Refraction = pc.createScript('refraction');

Refraction.attributes.add('vs', {
    type: 'asset',
    assetType: 'shader',
    title: 'Vertex Shader'
});

Refraction.attributes.add('fs', {
    type: 'asset',
    assetType: 'shader',
    title: 'Fragment Shader'
});

// initialize code called once per entity
Refraction.prototype.initialize = function() {
    var effect = new pc.RefractionPostEffect(this.app.graphicsDevice, this.vs.resource, this.fs.resource);

    // add the effect to the camera's postEffects queue
    var queue = this.entity.camera.postEffects;
    queue.addEffect(effect);
    
    this.effect = effect;
    
    // Save the current shaders for hot reload 
    this.savedVS = this.vs.resource;
    this.savedFS = this.fs.resource;
};

Refraction.prototype.update = function(){
     if(this.savedFS != this.fs.resource || this.savedVS != this.vs.resource){
         this.swap(this);
     }
};

Refraction.prototype.swap = function(old){
    this.entity.camera.postEffects.removeEffect(old.effect);
    this.initialize(); 
};

This is just like a normal script, but we define a RefractionPostEffect class that can be applied to the camera. This needs a vertex and a fragment shader to render. The attributes are already set up, so let's create Refraction.frag with this content:

precision highp float;

uniform sampler2D uColorBuffer;
varying vec2 vUv0;

void main() {
    vec4 color = texture2D(uColorBuffer, vUv0);
    
    gl_FragColor = color;
}

And Refraction.vert with a basic vertex shader:

attribute vec2 aPosition;
varying vec2 vUv0;

void main(void)
{
    gl_Position = vec4(aPosition, 0.0, 1.0);
    vUv0 = (aPosition.xy + 1.0) * 0.5;
}

Now attach the Refraction.js script to the camera, and assign the shaders to the appropriate attributes. When you launch the game, you should see the scene exactly as it was before. This is a blank post effect that simply re-renders the scene. To verify that this is working, try giving the scene a red tint.

In Refraction.frag, instead of simply returning the color, try setting the red component to 1.0, which should look like the image below.

Distortion Shader

We need to add a time uniform for the animated distortion, so go ahead and create one in Refraction.js, inside this constructor for the post effect:

var RefractionPostEffect = function (graphicsDevice, vs, fs) {
    var fragmentShader = "precision " + graphicsDevice.precision + " float;\n";
    fragmentShader = fragmentShader + fs;
    // this is the shader definition for our effect
    this.shader = new pc.Shader(graphicsDevice, {
        attributes: {
            aPosition: pc.SEMANTIC_POSITION
        },
        vshader: vs,
        fshader: fs
    });
    // >>>>>>>>>>>>> Initialize the time here 
    this.time = 0;
    };

Now, inside this render function, we pass it to our shader and increment it:

RefractionPostEffect.prototype = pc.extend(RefractionPostEffect.prototype, {
    // Every post effect must implement the render method which
    // sets any parameters that the shader might require and
    // also renders the effect on the screen
    render: function (inputTarget, outputTarget, rect) {
        var device = this.device;
        var scope = device.scope;

        // Set the input render target to the shader. This is the image rendered from our camera
        scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);   
        /// >>>>>>>>>>>>>>>>>> Pass the time uniform here 
        scope.resolve("uTime").setValue(this.time);
        this.time += 0.1;

        // Draw a full screen quad on the output target. In this case the output target is the screen.
        // Drawing a full screen quad will run the shader that we defined above
        pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
    }
});

Now we can use the same shader code from the water distortion tutorial, making our full fragment shader look like this:

precision highp float;

uniform sampler2D uColorBuffer;
uniform float uTime;

varying vec2 vUv0;

void main() {
    vec2 pos = vUv0;
    
    float X = pos.x*15.+uTime*0.5;
    float Y = pos.y*15.+uTime*0.5;
    pos.y += cos(X+Y)*0.01*cos(Y);
    pos.x += sin(X-Y)*0.01*sin(Y);
    
    vec4 color = texture2D(uColorBuffer, pos);
    
    gl_FragColor = color;
}

If it all worked out, everything should now look like as if it's underwater, as below.

Challenge #1: Make the distortion only apply to the bottom half of the screen.

Camera Masks

We're almost there. All we need to do now is to apply this distortion effect just on the underwater part of the screen. The most straightforward way I've come up with to do this is to re-render the scene with the water surface rendered as a solid white, as shown below.

This would be rendered to a texture that would act as a mask. We would then pass this texture to our refraction shader, which would only distort a pixel in the final image if the corresponding pixel in the mask is white.

Let's add a boolean attribute on the water surface to know if it's being used as a mask. Add this to Water.js:

Water.attributes.add('isMask', {type:'boolean',title:"Is Mask?"});

We can then pass it to the shader with material.setParameter('isMask',this.isMask); as usual. Then declare it in Water.frag and set the color to white if it's true.

// Declare the new uniform at the top
uniform bool isMask;

// At the end of the main function, override the color to be white 
// if the mask is true 
if(isMask){
   color = vec4(1.0); 
}

Confirm that this works by toggling the "Is Mask?" property in the editor and relaunching the game. It should look white, as in the earlier image.

Now, to re-render the scene, we need a second camera. Create a new camera in the editor and call it CameraMask. Duplicate the Water entity in the editor as well, and call it WaterMask. Make sure the "Is Mask?" is false for the Water entity but true for the WaterMask.

To tell the new camera to render to a texture instead of the screen, create a new script called CameraMask.js and attach it to the new camera. We create a RenderTarget to capture this camera's output like this:

// initialize code called once per entity
CameraMask.prototype.initialize = function() {
    // Create a 512x512x24-bit render target with a depth buffer
    var colorBuffer = new pc.Texture(this.app.graphicsDevice, {
        width: 512,
        height: 512,
        format: pc.PIXELFORMAT_R8_G8_B8,
        autoMipmap: true
    });
    colorBuffer.minFilter = pc.FILTER_LINEAR;
    colorBuffer.magFilter = pc.FILTER_LINEAR;
    var renderTarget = new pc.RenderTarget(this.app.graphicsDevice, colorBuffer, {
        depth: true
    });

    this.entity.camera.renderTarget = renderTarget;
};

Now, if you launch, you'll see this camera is no longer rendering to the screen. We can grab the output of its render target in Refraction.js like this:

Refraction.prototype.initialize = function() {
    var cameraMask = this.app.root.findByName('CameraMask');
    var maskBuffer = cameraMask.camera.renderTarget.colorBuffer;
    var effect = new pc.RefractionPostEffect(this.app.graphicsDevice, this.vs.resource, this.fs.resource, maskBuffer);
    // ...
    // The rest of this function is the same as before
};

Notice that I pass this mask texture as an argument to the post effect constructor. We need to create a reference to it in our constructor, so it looks like:

//// Added an extra argument on the line below
var RefractionPostEffect = function (graphicsDevice, vs, fs, buffer) {
        var fragmentShader = "precision " + graphicsDevice.precision + " float;\n";
        fragmentShader = fragmentShader + fs;
        // this is the shader definition for our effect
        this.shader = new pc.Shader(graphicsDevice, {
            attributes: {
                aPosition: pc.SEMANTIC_POSITION
            },
            vshader: vs,
            fshader: fs
        });
        this.time = 0;
        //// <<<<<<<<<<<<< Saving the buffer here 
        this.buffer = buffer; 
    };

Finally, in the render function, pass the buffer to our shader with:

scope.resolve("uMaskBuffer").setValue(this.buffer); 

Now to verify that this is all working, I'll leave that as a challenge.

Challenge #2: Render the uMaskBuffer to the screen to confirm it is the output of the second camera.

One thing to be aware of is that the render target is set up in the initialize of CameraMask.js, and that needs to be ready by the time Refraction.js is called. If the scripts run the other way around, you'll get an error. To make sure they run in the right order, drag the CameraMask to the top of the entity list in the editor, as shown below.

The second camera should always be looking at the same view as the original one, so let's make it always follow its position and rotation in the update of CameraMask.js:

CameraMask.prototype.update = function(dt) {
    var pos = this.CameraToFollow.getPosition();
    var rot = this.CameraToFollow.getRotation();
    this.entity.setPosition(pos.x,pos.y,pos.z);
    this.entity.setRotation(rot);
};

And define CameraToFollow in the initialize:

this.CameraToFollow = this.app.root.findByName('Camera');

Culling Masks

Both cameras are currently rendering the same thing. We want the mask camera to render everything except the real water, and we want the real camera to render everything except the mask water.

To do this, we can use the camera's culling bit mask. This works similarly to collision masks if you've ever used those. An object will be culled (not rendered) if the result of a bitwise AND between its mask and the camera mask is 1.

Let's say the Water will have bit 2 set, and WaterMask will have bit 3. Then the real camera needs to have all bits set except for 3, and the mask camera needs to have all bits set except for 2. An easy way to say "all bits except N" is to do:

~(1 << N) >>> 0

You can read more about bitwise operators here.

To set up the camera culling masks, we can put this inside CameraMask.js's initialize at the bottom:

    // Set all bits except for 2 
    this.entity.camera.camera.cullingMask &= ~(1 << 2) >>> 0;
    // Set all bits except for 3
    this.CameraToFollow.camera.camera.cullingMask &= ~(1 << 3) >>> 0;
    // If you want to print out this bit mask, try:
    // console.log((this.CameraToFollow.camera.camera.cullingMask >>> 0).toString(2));

Now, in Water.js, set the Water mesh's mask on bit 2, and the mask version of it on bit 3:

// Put this at the bottom of the initialize of Water.js

// Set the culling masks 
var bit = this.isMask ? 3 : 2; 
meshInstance.mask = 0; 
meshInstance.mask |= (1 << bit);

Now, one view will have the normal water, and the other will have the solid white water. The left half of the image below is the view from the original camera, and the right half is from the mask camera.

Applying the Mask

One final step now! We know the areas underwater are marked with white pixels. We just need to check if we're not at a white pixel, and if so, turn off the distortion in Refraction.frag:

// Check original position as well as new distorted position
vec4 maskColor = texture2D(uMaskBuffer, pos);
vec4 maskColor2 = texture2D(uMaskBuffer, vUv0);
// We're not at a white pixel?
if(maskColor != vec4(1.0) || maskColor2 != vec4(1.0)){
    // Return it back to the original position
    pos = vUv0;
}

And that should do it!

One thing to note is that since the texture for the mask is initialized on launch, if you resize the window at runtime, it will no longer match the size of the screen.

Anti-Aliasing

As an optional clean-up step, you might have noticed that edges in the scene now look a little sharp. This is because when we applied our post effect, we lost anti-aliasing. 

We can apply an additional anti-alias on top of our effect as another post effect. Luckily, there's one available in the PlayCanvas store we can just use. Go to the script asset page, click the big green download button, and choose your project from the list that appears. The script will appear in the root of your asset window as posteffect-fxaa.js. Just attach this to the Camera entity, and your scene should look a little nicer! 

Final Thoughts

If you've made it this far, give yourself a pat on the back! We covered a lot of techniques in this series. You should now be comfortable with vertex shaders, rendering to textures, applying post-processing effects, selectively culling objects, using the depth buffer, and working with blending and transparency. Even though we were implementing this in PlayCanvas, these are all general graphics concepts you'll find in some form on whatever platform you end up in.

All these techniques are also applicable to a variety of other effects. One particularly interesting application I've found of vertex shaders is in this talk on the art of Abzu, where they explain how they used vertex shaders to efficiently animate tens of thousands of fish on screen.

You should now also have a nice water effect you can apply to your games! You could easily customize it now that you've put together every detail yourself. There's still a lot more you can do with water (I haven't even mentioned any sort of reflection at all). Below are a couple of ideas.

Noise-Based Waves

Instead of simply animating the waves with a combination of sine and cosines, you can sample a noise texture to make the waves look a bit more natural and unpredictable.

Dynamic Foam Trails

Instead of completely static water lines on the surface, you could draw onto that texture when objects move, to create a dynamic foam trail. There are a lot of ways to go about doing this, so this could be its own project.

Source Code

You can find the finished hosted PlayCanvas project here. A Three.js port is also available in this repository.

In this final part of our series about interactive storytelling, we'll talk about the future of storytelling in videogames.

Non-Linear Interactive Storytelling

Or the Philosopher's Stone

Non-linear interactive storytelling is similar to the philosopher's stone: everybody talks about it, everybody wants it, but no one has found it yet.

Let's start with the definition: what is non-linear interactive storytelling? 

It's simple: this is storytelling that changesbased on the player's choices. In the previous article, we discussed linear interactive storytelling and how it gives the player only the illusion of choice. Of course, there are some really sophisticated games that give a betterillusion about freedom and choices and even the chance to really change the course of the story. But still, it is an illusion.

So the best definition of non-linear interactive storytelling is a way to break this illusion and give the player real choices. However, this requires some advanced technology: Artificial Intelligence.

That's because true non-linear interactive storytelling requires an AI capable of reacting to the player's actions. As in real life. The theory is quite simple, on paper. The player does something in the game's world, and the world and everybody inside it will react.

But, of course, creating a system like that is nearly impossible with the current technology, because of the complex calculations needed. We're talking about totally removing the scripted part from a game! And right now at least 90% of a game is scripted.

In the second part, we talked about Zelda Breath of the Wild. That, I think, is a starting point: a game where the developers set out rules about the world, and the player can play with them freely.

Extend this idea to all elements, and you'll have the illusion broken.

Again: this has never been done, but I'm sure somebody will do it in the future. Maybe with the next console generation, when the calculation power increases.

Okay, that's the future. But what about today?

Today, there are some games that are trying to create a non-linear experience. I'll talk about two of them, as examples.

The first is an AAA game. Everybody knows it: Detroit Become Human. In his most recent game, David Cage is trying really hard to give the player a lot of forks and choices. Yes, it's still an illusion, but it's the game that I know with the highest number of narrative forks. While playing this game, you have the feeling that every choice matters. Even the small ones.

Don't get me wrong: it's all scripted. And I think that's the wrong way to achieve real non-linear storytelling. But it's one of the games that comes closest. It's great to play without trying to discover the hidden script, just to "live" the experience.

Of course, the game itself, chapter after chapter, will show you a flowchart about the forks. And you will know where the narrative joints are. But, really: if you can, try it without thinking about that, and you'll have a better illusion of choice in the game.

The second game is an indie experiment: Avery. It's an experimental game based on an AI. It's free, it's for both iOS and Android, and you must try it. It's a game where the AI will respond to the player dynamically. And that's the right way, I'm sure, to achieve true non-linear interactive storytelling.

Of course, keep in mind that it's an indie game and it's free. But it's amazing. It's an "Artificial Intelligence Conversation". Those among you who are a little older (like me) will surely remember Eliza, the first chatterbot. Avery is an evolution of that. You'll talk with an AI that has lost its memory and is scared because something is wrong. Again: try it because, playing Avery, you can see one of the first steps towards our philosopher's stone.

Direct and Indirect Mode

As I said at the start of the article, we have the theory. More theory than we really need, probably—that's because we can't work on the real part, so we're talking, writing and thinking too much about it.

But a good part of this theory is found in some interesting papers and books. In those you will find two main definitions: direct mode and indirect mode. These are the ways in which the storytelling should react to the player's actions.

Direct mode is quite simple: the player does something, and the story will change in response. Action -> reaction. This is the way, for example, most tabletop role-playing games work.

The Game Master explains a situation -> the player makes a choice -> the Game Master tells how the story reacts to that choice.

The two games that I gave as examples before also work in this way. And when we have a full non-linear interactive storytelling game, I guess this mode will be the most common.

Also note that the majority of linear storytelling works this way: there is a setting, with a conflict, the character does something, and the story (the ambient environment, the villain, or some other character) reacts.

But there is a more sophisticated way to tell a non-linear story: indirect mode.

This is more like how the real world works. You do something, which causes a small direct reaction, which engages a chain reaction that can go on to have effects in distant places.

This is the so-called "butterfly effect". You will discover that this type of story-telling works only if there is not a real "main character". Because, in the real world, everyone is the main character of his or her own story. But there are billions of stories told every second around the world. And each story, somehow, is influenced by all the other stories.

Back to gaming, there are already games that use this concept: MMOs. Think about World of Warcraft: there is no main character, and the "total story" (the sum of all stories about all characters) is a complex web that links all individual stories. So actually, in the first part of this article, I lied: there is already a way to create non-linear interactive storytelling, and that's to put the domain of the story in the players' hands!

Of course, in World of Warcraft, there are still scripted parts (the enemies, the quests, the NPCs, etc.), and that's why WoW is not an example of true non-linear interactive storytelling. But when the players have the ability to create their own story, there is not only non-linear storytelling, but also it's told in indirect mode.

So think about this: some day, in the near future, we'll have a game where the AI will be so advanced that we'll play with it in the same way we play with the other humans in WoW.

That's the goal. That's true non-linear interactive storytelling.

Conclusion

I started writing this series of articles almost six months ago. It's been a labour of love, and I'm thankful to Envato Tuts+ for encouraging me to pursue it. This is a topic I really care about, and there are a lot of things that I had to cut to keep the series to only three parts. 

If you are interested, though, there are lots of articles and videos on this topic. For example, I could have talked about the dissonance ludonarrative (look it up!). I also had to cut a big part about Florence (a really great linear interactive storytelling game—again, try it if you can). And so on.

However, I'm happy to have this series wrapped up, and I hope you've enjoyed the articles and will find them useful.

Interactive storytelling is, in my opinion, one of the big challenges that the industry will face in its next step. In the last two console generations, we saw incredible advances in graphics and gameplay. Now it's time to think about the story. Because, you know, stories matter.

This tutorial is different from my earlier tutorials as this one is oriented towards game jams and game prototyping, specifically card games. We are going to create a 2D playing card deck in Unity without using any art—purely with code.

1. Components of a Playing Card Deck

A playing card deck has a total of 52 cards with 13 cards each of 4 different symbols. In order to create one using code, we will need to create these 4 symbols, the rounded rectangular base for the card, and the design on the back of the card.

The design on the back of the card can be any abstract pattern, and there are numerous ways to create one. We will be creating a simple tileable pattern which will then be tiled to create the design. We won't have any special design for the A, K, Q, and J cards.

2. Alternative Solutions

Before we start, I have to mention that there are easier solutions out there which we can use to create a deck of cards. Some of those are listed below.

1. The obvious one is to use pre-rendered art for all the designs.
2. The less obvious one is to use a font which contains all the necessary symbols. We can also turn the said font into a bitmap font to reduce draw calls and increase performance.

The font-based solution is the fastest and easiest one if you want to do quick prototypes.

3. Creating Textures During Runtime

The first step is to learn how to create a Texture2D using code which can then be used to create a Sprite in Unity. The following code shows the creation of a 256x256 blank texture.

Texture2D texture = new Texture2D(256, 256, TextureFormat.ARGB4444, false);
texture.filterMode=FilterMode.Trilinear;
texture.wrapMode=TextureWrapMode.Clamp;
texture.Apply();

The idea is to draw all the designs onto the texture before we use the Apply method. We can draw designs onto the texture pixel by pixel using the SetPixel method, as shown below.

texture.SetPixel(x, y, Color.white);

For example, if we wanted to fill out the entire texture with a color, we could use a method like this.

private void PaintRectangle(Texture2D texture, Rect rectBounds, Color color)
{
    for (int i=(int)rectBounds.x;i<rectBounds.x+rectBounds.width;i++){
    	for (int j=(int)rectBounds.y;j<rectBounds.y+rectBounds.height;j++){
			texture.SetPixel(i, j, color);
		}
	}
}
//
PaintRectangle(texture,new Rect(0,0,256,256),Color.red);

Once we have a Texture2D created, we can use it to create a Sprite to be displayed on screen.

Sprite sprite = Sprite.Create(texture, new Rect(0.0f, 0.0f, texture.width, texture.height), new Vector2(0.5f, 0.5f),1);

The complicated part in all this is the creation of the necessary designs on the texture.

4. Creating the Heart Shape

When it comes to the creation of the heart shape, there are many different approaches which we could use, among which are some complicated equations as well as simple mixing of shapes. We will use the mixing of shapes method as shown below, specifically the one with the triangle.

As you have observed, we can use two circles and a square or a triangle to create the basic heart shape. This means it would miss those extra beautiful curves but would fit our purpose perfectly.

Painting a Circle

Let's brush up on some equations to paint a circle. For a circle with centre at origin and radius r, the equation for the point (x,y) on the circle is x2 + y2 = r2. Now if the centre of the circle is at (h,k) then the equation becomes  (x-h)2 + (y-k)2 = r2. So if we have a square bounding box rectangle then we can loop through all the points within that rectangle and determine which points fall inside the circle and which do not. We can easily create our PaintCircle method based on this understanding, as shown below.

private void PaintCircle(Texture2D texture,float radius, Vector2 midPoint, Color color){
    Rect circleBounds=new Rect();
	circleBounds.x=Mathf.Clamp(midPoint.x-(radius),0,resolution);
	circleBounds.y=Mathf.Clamp(midPoint.y-(radius),0,resolution);
	circleBounds.width=Mathf.Clamp(2*radius,0,resolution);
	circleBounds.height=Mathf.Clamp(2*radius,0,resolution);
	float iValue;
	for (int i=(int)circleBounds.x;i<circleBounds.x+circleBounds.width;i++){
		for (int j=(int)circleBounds.y;j<circleBounds.y+circleBounds.height;j++){
			iValue=(Mathf.Sqrt(radius*radius-((j-midPoint.y)*(j-midPoint.y))));
			if(i>midPoint.x-iValue&&i<midPoint.x+iValue){
				texture.SetPixel(i, j, color);
			}
		}
	}
}
PaintCircle(texture,radius,mid,Color.red);

Once we have the PaintCircle method, we can proceed to create our heart shape as shown below.

void PaintHearts(Texture2D texture){	
	//2 circles on top
	float radius =resolution*0.26f;
	Vector2 mid=new Vector2(radius,resolution-radius);
	PaintCircle(texture,radius,mid,Color.red);
	mid=new Vector2(resolution-radius,resolution-radius);
	PaintCircle(texture,radius,mid,Color.red);
	//triangle at bottom
	float width=resolution*0.58f;
	int endJ=(int)(resolution*0.65f);
	int startJ=(int)(resolution*0.1f);
	float delta=(width/endJ);
	float midI=resolution*0.5f;
	for (int i=0;i<resolution;i++){
		for (int j=startJ;j<endJ;j++){
			if(i>(midI-(delta*(j-startJ)))&&i<(midI+(delta*(j-startJ)))){
				texture.SetPixel(i, j, Color.red);
			}
		}
	}
}

The variable resolution is the width and height of the texture.

5. Creating the Diamond Shape

We will discuss two ways to draw the diamond shape.

Painting a Simple Diamond

The easiest one is to extend the code used for the triangle and add an inverted triangle on the top to create the necessary shape, as shown below.

 void PaintDiamond(Texture2D texture){
	float width=resolution*0.35f;
	for (int i=0;i<resolution;i++){
		for (int j=0;j<resolution;j++){
			if(ValidDiamondPosition(i,j,width)){
				texture.SetPixel(i, j, Color.red);
			}
		}
	}
}

private bool ValidDiamondPosition(int i, int j, float width)
{
	//i =col j = row
    bool isValid=false;
	float midI=(resolution/2.0f);
	float midJ=(resolution/2.0f);
	float delta=(width/midJ);
	if(j>midJ){
		j=resolution-j;
		if(i>(midI-(delta*j))&&i<(midI+(delta*j))){
			isValid=true;
		}
	}else{
		if(i>(midI-(delta*j))&&i<(midI+(delta*j))){
			isValid=true;
		}
	}
	return isValid;
}
PaintDiamond(texture);

Painting a Curvy Diamond

The second one is to use another equation to create a better, curvy version of our diamond shape. We will be using this one to create the tiling design for the back side of our card. The equation for a circle derives from the original equation of an ellipse, which is (x/a)2 + (y/b)2 = r2.

This equation is the same as that of the circle when the variables a and b are both 1. The ellipse equation can then be extended into a superellipse equation for similar shapes just by changing the power, (x/a)n + (y/b)n = rn. So when n is 2 we have the ellipse, and for other values of n we will have different shapes, one of which is our diamond. We can use the approach used to arrive at the PaintCircle method to arrive at our new PaintDiamond method.

private void PaintDiamond(Texture2D texture, Rect rectBounds, Vector2 midPoint, Color color, float n=0.8f)
{
    float iValue;
	int a=(int)(rectBounds.width/2);
	int b=(int)(rectBounds.height/2);
	float nRoot=1/n;
	float delta;
	float partialOne;
	rectBounds.width=Mathf.Clamp(rectBounds.x+rectBounds.width,0,resolution);
	rectBounds.height=Mathf.Clamp(rectBounds.y+rectBounds.height,0,resolution);
	rectBounds.x=Mathf.Clamp(rectBounds.x,0,resolution);
	rectBounds.y=Mathf.Clamp(rectBounds.y,0,resolution);
	for (int i=(int)rectBounds.x;i<rectBounds.width;i++){
		for (int j=(int)rectBounds.y;j<rectBounds.height;j++){
			delta=Mathf.Abs(j-midPoint.y);
			partialOne=Mathf.Pow(b,n)-Mathf.Pow(delta,n);
			iValue=((a/b)*Mathf.Pow(partialOne,nRoot));//+mid.x
			if(i>midPoint.x-iValue && i<midPoint.x+iValue){
				texture.SetPixel(i, j, color);
			}
		}
	}
}

Painting a Rounded Rectangle

The same equation can be used to create our rounded rectangle card base shape by varying the value of n.

private void PaintRoundedRectangle(Texture2D texture)
{
    for (int i=0;i<resolution;i++){
		for (int j=0;j<resolution;j++){
			if(ValidRRPosition(i,j)){
				texture.SetPixel(i, j, Color.white);
			}else{
				texture.SetPixel(i, j, Color.clear);
			}
		}
	}
}

private bool ValidRRPosition(int i, float j)
{
    bool isValid=false;
	float iValue;
	Vector2 mid;
	
	mid=new Vector2(resolution/2,resolution/2);
	int radius=(int)(resolution/2);
	int a=radius;
	int b=radius;
	float n=16;
	float nRoot=1/n;
	float delta=j-mid.y;
	float partialOne=Mathf.Pow(b,n)-Mathf.Pow(delta,n);
	iValue=((a/b)*Mathf.Pow(partialOne,nRoot));//+mid.x
	if(i>mid.x-iValue && i<mid.x+iValue){
		isValid=true;
	}
	return isValid;
}

Painting a Tiling Design

Using this PaintDiamond method, we can draw five diamonds to create the tiling texture for the design on the back of our card.

The code for drawing the tiling design is as below.

 private void PaintTilingDesign(Texture2D texture, int tileResolution)
    {
    Vector2 mid=new Vector2(tileResolution/2,tileResolution/2);
	float size=0.6f*tileResolution;
	PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red);
	mid=new Vector2(0,0);
	PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red);
	mid=new Vector2(tileResolution,0);
	PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red);
	mid=new Vector2(tileResolution,tileResolution);
	PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red);
	mid=new Vector2(0,tileResolution);
	PaintDiamond(texture,new Rect(mid.x-size/2,mid.y-size/2,size,size),mid,Color.red);
}

6. Creating the Spades Shape

The spades shape is just the vertical flip of our heart shape along with a base shape. This base shape will be the same for the clubs shape as well. The below figure illustrates how we can use two circles to create this base shape.

The PaintSpades method will be as shown below.

void PaintSpades(Texture2D texture){
    //2 circles on middle
	float radius =resolution*0.26f;
	Vector2 mid=new Vector2(radius,resolution-2.2f*radius);
	PaintCircle(texture,radius,mid,Color.black);
	mid=new Vector2(resolution-radius,resolution-2.2f*radius);
	PaintCircle(texture,radius,mid,Color.black);
	//triangle at top
	float width=resolution*0.49f;
	int startJ=(int)(resolution*0.52f);
	float delta=(width/(resolution-startJ));
	float midI=resolution*0.5f;
	int alteredJ;
	radius=resolution*0.5f;
	float midJ=resolution*0.42f;
	float iValue;
	for (int i=0;i<resolution;i++){
		//top triangle
		for (int j=startJ;j<resolution;j++){
			alteredJ=resolution-j;
			if(i>(midI-(delta*alteredJ))&&i<(midI+(delta*alteredJ))){
				texture.SetPixel(i, j, Color.black);
			}
		}
		//bottom stalk
		for (int k=0;k<resolution*0.5f;k++){
			mid=new Vector2(0,midJ);
			iValue=(Mathf.Sqrt(radius*radius-((k-mid.y)*(k-mid.y))));//+mid.x;
			if(i>mid.x+iValue){
				mid=new Vector2(resolution,midJ);
				iValue=(Mathf.Sqrt(radius*radius-((k-mid.y)*(k-mid.y))));//+mid.x;
				if(i<mid.x-iValue){
					texture.SetPixel(i, k, Color.black);
				}
			}
		}
	}
}

7. Creating the Clubs Shape

At this point, I am sure that you can figure out how easy it has become to create the clubs shape. All we need are two circles and the base shape we created for the spades shape.

The PaintClubs method will be as shown below.

 void PaintClubs(Texture2D texture){
	int radius=(int)(resolution*0.24f);
	//3 circles
	Vector2 mid=new Vector2(resolution*0.5f,resolution-radius);
	PaintCircle(texture,radius,mid,Color.black);
	mid=new Vector2(resolution*0.25f,resolution-(2.5f*radius));
	PaintCircle(texture,radius,mid,Color.black);
	mid=new Vector2(resolution*0.75f,resolution-(2.5f*radius));
	PaintCircle(texture,radius,mid,Color.black);
	//base stalk
	radius=(int)(resolution*0.5f);
	float midY=resolution*0.42f;
	int stalkHeightJ=(int)(resolution*0.65f);
	float iValue;
	for (int i=0;i<resolution;i++){
		for (int j=0;j<stalkHeightJ;j++){
			mid=new Vector2(resolution*-0.035f,midY);
			iValue=(Mathf.Sqrt(radius*radius-((j-mid.y)*(j-mid.y))));//+mid.x;
			if(i>mid.x+iValue){
				mid=new Vector2(resolution*1.035f,midY);
				iValue=(Mathf.Sqrt(radius*radius-((j-mid.y)*(j-mid.y))));//+mid.x;
				if(i<mid.x-iValue){
					texture.SetPixel(i, j, Color.black);
				}
			}
		}
	}
}

8. Packing Textures

If you explore the Unity source files for this project, you'll find a TextureManager class which does all the heavy lifting. Once we have created all the necessary textures, the TextureManager class uses the PackTextures method to combine them into a single texture, thereby reducing the number of draw calls required when we use these shapes.

Rect[] packedAssets=packedTexture.PackTextures(allGraphics,1);

Using the packedAssets array, we can retrieve the bounding boxes of individual textures from the master texture named packedTexture.

public Rect GetTextureRectByName(string textureName){
    textureName=textureName.ToLower();
	int textureIndex;
	Rect textureRect=new Rect(0,0,0,0);
	if(textureDict.TryGetValue(textureName, out textureIndex)){
		textureRect=ConvertUVToTextureCoordinates(packedAssets[textureIndex]);
	}else{
		Debug.Log("no such texture "+textureName);
	}
	return textureRect;
}
private Rect ConvertUVToTextureCoordinates(Rect rect)
{
    return new Rect(rect.x*packedTexture.width,
        rect.y*packedTexture.height,
		rect.width*packedTexture.width,
		rect.height*packedTexture.height
	);
}

Conclusion

With all the necessary components created, we can proceed to create our deck of cards as it is just a matter of properly laying out the shapes. We can either use the Unity UI to composite cards or we can create the cards as individual textures. You can explore the sample code to understand how I have used the first method to create card layouts.

We can follow the same method for creating any kind of dynamic art at runtime in Unity. Creating art at runtime is a performance-hungry operation, but it only needs to be done once if we save and reuse those textures efficiently. By packing the dynamically created assets into a single texture, we also gain the advantages of using a texture atlas.

Now that we have our playing card deck, let me know what games you are planning to create with it.

Follow this tutorial step-by-step to create a low poly sword model that you can use in video games, graphic design and illustration projects whilst learning 3D Studio Max quickly. 

Some of the skills you'll learn in this tutorial include creating basic 3D shapes, modelling techniques and preparing topology for texturing.

In the first part of the two-part tutorial, I showed you how to:

• Model the Handle of the Sword
• Model the Hand Guard of the Sword
• Model the Blade of the Sword

In this, the second part of the the tutorial series, I'll show you how to:

• Unwrap the UVs
• Create a UV Map
• Create a Texture Map in Photoshop

05. UVW Remove

Step 1

In this section of the tutorial I'll go through how to prepare the model so that I can unwrap it. Both UVW Remove and Reset Xform must be performed before attempting to unwrap any of the sword parts.

Ensure you have selected the sword part that you want to unwrap (blade, handle, hand guard etc.). The object must now be converted into an editable mesh. To do this Right Click on the object and select Convert to Editable Mesh. 

Step 2

Then go to the Utilities Tab and click on the More button. Scroll down the menu and select UVW Remove.

Step 3

Click on the UVW button that appears under Parameters to apply this to the selected object.

Step 4

Once UVW Remove has been applied, Right Click on the object and select Convert to Editable Poly.

06. Reset XForm

Step 1

Ensure that you've selected the sword part that you want to unwrap (blade, handle, hand guard etc.). Go to the Utilities Tab and click on the Reset XForm button and then click on the Reset Selected button.

Step 2

Click on the Modify Tab and right click on XForm > Collapse All to apply this to your object.

07. Unwrapping the Blade

Step 1

To begin unwrapping the blade, ensure you've selected it and ensure you've followed both sections five and six of this tutorial—UVW Remove and Reset XForm.

To make the next step easier ensure that you're viewing the blade from the side view.

Step 2

Delete one half of the blade using the Vertex Selection tool.

Step 3

Make sure that the blade is an editable poly by right clicking on it and then selecting Convert to Editable Poly.

Step 4

Go to the Modifier List drop down menu and select Unwrap UVW.

Step 5

In the Modify Tab under the Edit UVs section select Open UV Editor.

Step 6

The Edit UVSs window appears. Use the Move Tool and the Scale Tool located in the top right of the window to move the object within the square. Once the object is within the square, click on the Reset Peel button.

Step 7

After clicking on the Reset Peel button, use the Move Tool to move the blade inside the border of the square.

Step 8

Use the tools on the top left of the Edit UVWs window (Move, Rotate, Scale) and place it on the right side of the square within the border.

Step 9

Close the Edit UVWs window. Ensure the blade is selected and go to the Modify tab. Right Click on the Unwrap Modifier and select Collapse All. 

If it becomes an Editable Mesh, convert it into an Editable Poly. Secondary Click > Convert to Editable Poly.

08. Duplicate the Blade UVs

Step 1

Use the Edge Selection Tool and select one of the outer most edges of the blade.

Step 2

In the Modifier List, scroll down and select Symmetry.

Step 3

Under the Parameters section, select the following:

• Mirror Axis: Y
• Flip
  

Step 4

Once the parameters have been selected, your blade should be whole again.

Step 5

Convert the blade back into an Editable Poly by selecting the blade with Secondary Click > Convert to Editable Poly.

Step 6

To check that the UVWs have been duplicated correctly, apply the Unwrap UVW modifier on the blade again by selecting it from the Modifier List.

Step 7

Move the UVWs in the Edit UVWs window to ensure that the blade shapes sit on top of each other nicely.

09. Unwrapping the Hand Guard

Step 1

Select the hand guard. The aim of this section is to remove half of each shape, so that they can be mirrored and so that they take up less space on the UVW Map.

Step 2

Select the middle tube shape and using the Vertex Selection tool, select and delete half of the shape.

Step 3

Select the middle shape and using the Vertex Selection tool, select and delete half of the shape.

Step 4

Repeat the same process for the horns. However I'll only need one half as this will be duplicate four times because we only need one half for the texture map.

Step 5

Select all the hand guard shapes and select Unwrap UVW from the Modifier List.

Step 6

Using the same process as what was done for the blade, Reset Peel and arrange the shapes within the square. Ensure all the objects are attached to one another.

Step 7

Convert the shapes back into an Editable Poly by selecting the blade and going Right Click > Convert to Editable Poly. Using the same process as what was done with the blade, use the Symmetry modifier to make the hand guard whole again.

Step 8

Ensure that the symmetry modifier gives you the correct results by choosing the right parameters. You can also apply Unwrap UVW modifier again to check the UVWs are placed on top of each other like the blade.

10. Unwrapping the Handle

Step 1

Select the middle section of the handle.

Step 2

Using the Vertex Selection tool, delete half of the handle.

Step 3

Repeat the same steps as above to remove half of the handle for all the objects.

Step 4

Ensure all the objects are attached to each other and apply the Unwrap UVW modifier.

Step 5

Using the same process as what was done for the blade and the hand guard, Reset Peel and arrange the shapes within the square. 

Step 6

Convert the shapes back into an Editable Poly by selecting the blade and going Secondary Click > Convert to Editable Poly. 

Using the same process as what was done with the blade and hand guard, use the Symmetry modifier to make the handle whole again.

Step 7

Ensure the symmetry modifier gives you the correct results by choosing the right parameters. You can also apply Unwrap UVW modifier again to check the UVWs are placed on top of each other like the blade.

11. Render UVW Map

Step 1

Attach all the objects together with Secondary Click > Attach, then apply the Unwrap UVW modifier.

Step 2

Open the UV Editor and ensure all the shapes are arranged within the square and are not overlapping each other. You can still edit them at this stage using the Move, Scale or Rotate tool.

Step 3

Once you are happy with the arrangement of the UVs go to Tools > Render UVW Template.

Step 4

Select the dimensions you would like to render the UV Map to and then click the Render UV Template button.

Step 5

Once the map has been generated, save it to a location using the save button on the top left hand corner of the window. 

12. Create Texture Map

Step 1

Import the UV map into Photoshop and create a new background layer below the UVs.

Step 2

You can make the UVs easier to see by changing the colour of the lines. To do this, right click on the UV layer and select Blending Options.

Step 3

Select Colour Overlay and choose a white colour.

Step 4

Create a new layer underneath the UVs and create a colour map so that you can select the shapes efficiently.

Step 5

Using the UVs and the colour map, create a new layer and create some base colours for the blade.

Step 6

On a separate layer, create some base colours for the handle.

Step 7

You can create a new layer on top of your base colours to create some details to the sword. You can add some highlights, cracks and battle damage to make it look more interesting.

Step 8

Once you are happy with the results, save your Texture Map as an image file.

13. Apply the Texture Map

Step 1

Ensure you have the sword selected and then click on the Material Editor button on the top menu bar.

Step 2

Once the Material Editor window appears go to Mode > Compact Material Editor.

Step 3

Select one of the spheres that you want the texture map to appear on and then click on the empty box next to Diffuse.

Step 4

Scroll up to the top of the Material/Map Browser and select Bitmap.

Step 5

Select the Texture Map image that was created in Adobe Photoshop.

Step 6

Ensure the sword model is selected and then click on Assign Material to Selection and then click on Show Shaded Material in Viewport. 

Step 7

This should apply the texture map to the 3D Sword Model.

Conclusion

And with that, the 3D Low Poly Sword is complete. Feel free to share the own creations below. Explore different objects, shapes and colours to find out what works best for your model.

You can also render the model and export it to Adobe Photoshop to create an image for your portfolio.

Follow this tutorial step-by-step to create a retro Nintendo Game Boy that you can use in video games, graphic design and illustration projects whilst learning how to model in Cinema 4D. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images and basic rendering techniques.

In this, the first part of the two-part tutorial, I'll show you:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the retro Game Boy

1. How to Import Reference Images

Step 1

Use the middle mouse button to click anywhere on the viewport. This will display all four views. From there, use the middle mouse button to select the Front view.

Step 2

In the Attributes tab select Mode > View Settings.

Step 3

In Viewport [Right] select the Back button and click on the button next to Image. 

Step 4

Select your reference image from the finder and open it. In this tutorial I'll use the front view of a retro Nintendo Game Boy to help me.

Step 5

Adjust the image size and transparency to your liking in the properties window.

2. How to Adjust the Cube Shape

Step 1

In the top menu bar select the Cube to spawn a cube into the scene.

Step 2

In the properties window, adjust the size so that the shape of the cube fits the shape of the Game Boy background image.

Step 3

The shape of the cube should roughly fit the shape of the Game Boy background image at this stage. 

Ensure that you check the shape using the other camera views as well (perspective, side and top etc).

Step 4

Ensure that you check the shape using the other camera views as well (perspective, side and top etc). The size of the shape in the Z axis should be roughly half of what the Game Boy should be.

Step 5

Select the Make Editable button to make the shape editable. Next select the Edge Selection button.

Step 6

Select the bottom right corner of the shape. This is highlighted in orange.

Step 7

Once selected choose the Bevel Tool by using the mouse to Right Click > Bevel. Adjust the bevel by changing the settings in the properties window.

Step 8

Select the remaining three corners of the shape. This is highlighted in orange. Use the Bevel Tool to curve the corners slightly. The curvature of the remaining three corners should be less than the bottom right corner.

3. How to Create the Game Boy Shape

Step 1

Select the Move Tool. To duplicate this shape you will need to hold CTRL button on the keyboard and then click and drag the Blue Arrow using the mouse. Leave a small gap in between both shapes.

Step 2

Duplicate the shape again and place the new shape in in between the other two (in the middle). With the middle shape still selected, use the Scale Tool and shrink the middle shape by about 95%.

Step 3

Click on the small back arrow on the Cube button and select Cylinder from the list of options. This will spawn a Cylinder in the scene.

Step 4

Adjust the properties of the size and orientation of the cylinder using the properties window. The thickness of the cylinder should be roughly the same as the small gap created between the two larger shapes.

Step 5

Once you're happy with the size and shape of the cylinder, place it in between the two shapes in the gap.

4. How to Create the Screen

Step 1

Duplicate one of the larger shapes and then use the Scale Tool to reduce the thickness of the shape so that it becomes quite thin.

Step 2

Use the Move Tool and combine it with the Points Selection Tool to move the rounded corners of the shape so that it fits the size of the screen border (as shown in the background reference image).

Step 3

Select the points you want to move and then move them into place using the Move Tool.

Step 3

Create a new cube and change the shape of it so that it fits the main screen of the Game Boy.

Step 4

Once you're happy with the size of the shapes, use the Move Tool to place them on to the body of the Game Boy.

5. How to Create the Buttons

Step 1

Click on the small back arrow on the Cube button and select Cylinder from the list of options. This will spawn a cylinder in the scene.

Step 2

Adjust the properties of the cylinder so that it is facing the correct way, has the correct size and has the desired thickness for the button. Then use the Move Tool to move the button into the correct place using the background image as your reference.

Step 3

Duplicate the button and use the Scale Tool to increase the size slightly. You will want to increase the size uniformly so that the centre point of each object is the same (seen from the front view). 

Step 4

Make sure that the duplicate cylinder is selected and click on the Make Editable Button. 

Step 5

Now that the object is editable, we can edit the points. Make sure that the cylinder object is selected and click on Points Button. 

Click on the Rectangle Selection Tool so that we can select the points you wish to edit. Once you've selected the points you can move them using the Move Tool.

Step 6

Use the Rectangle Selection Tool to select half of the cylinder. Then use the Move Tool to move the points to the right.

Step 7

Duplicate the button and use the Move Tool to move the button to the right.

Step 8

When moving a whole object, select and use the Model button. If this is not selected, you may find that you will be moving the points, edges or faces instead.

Step 9

Making sure that you have the Model button turned on, select all three cylinder shapes which now make up your Game Boy buttons. 

Once all three have been selected, press Alt-G on the keyboard to group them up. You can then rename the Null by double clicking on it.

Step 10

Select the whole group and use the Rotate Tool to rotate the buttons so that it matches the reference image in the front view.

Step 11

Ensure that you use the other camera views to ensure that the button placement is correct and moved to the right area.

6. How to Create the D-Pad

Step 1

To create the D-Pad, use a similar technique to creating the Game Boy buttons. 

First, create the background cylinder. To do this click on the small back arrow on the Cube button and select Cylinder from the list of options. This will spawn a cylinder in the scene.

Step 2

Resize the cylinder using the shape parameters window so that it fits roughly around the size of the D-Pad. Then use the Move Tool to move the cylinder shape in place. 

Step 3

With the cylinder shape selected you can use the parameters window to adjust the radius, height and rotation segments of the cylinder. 

The more segments you create, the smoother the circle will become. We also want to make sure that the height is not too large, as this shape will only be used on the surface of the Game Boy.

Step 4

Create a cube and use the parameters window again to adjust the shape so that it is roughly the same shape as half of the D-Pad.

Step 5

With the new cube shape selected you can use the parameters window to adjust the size or the D-Pad. This object will need to be duplicated in order to create the second half of the D-Pad.

Step 6

To duplicate this shape, select the cube from the object list. Press the CTRL button on the keyboard and click and drag the cube object. 

Place the duplicate cube object on the list. This way of duplicating an object means that both objects are exactly the same in exactly the same position.

Step 7

Rotate the new D-Pad object using the Rotate Tool and rotate it by exactly 90 degrees. 

Step 8

Make sure that you use the other camera views to ensure that the D-Pad placement is correct and moved to the right area.

7. How to Create the Start & Select Buttons

Step 1

Because the start and select buttons have a very similar shape to the shape that was created for the background for the buttons, duplicate the same shape. 

Do this by pressing and holding the CTRL button on the keyboard and clicking and dragging the object using the Move Tool. 

Step 2

With the new object selected, use the Scale Tool to make the shape around the same size as the start and select buttons in the reference image. 

Ensure that you click on the background instead of the coloured icons when using the tool if you want to scale uniformly.

Step 3

Use the Move Tool and combine it with the Points Selection Tool to move the rounded corners of the shape so that it fits the length of the start and select button (as shown in the background reference image).

Step 4

Ensure the you have the object and Move Tool selected. Hold the CTRL button on the keyboard and click and drag the button to duplicate it.

Step 5

Ensure that you use the other camera views to ensure that the start and select button placement is correct and moved to the right area.

8. How to Create the Speakers

Step 1

Because the speakers have a very similar shape to the shape that was created for the start and select buttons, we will be duplicating the same shape. 

Do this by pressing and holding the CTRL button on the keyboard and clicking and dragging the object using the Move Tool. 

Step 2

Use the Rotate Tool to rotate the shape so that it fits the angle shown in the reference image.

Step 3

Use the Scale Tool so that the size roughly fits that of the speakers in the reference image.

Step 4

Use the Move Tool and combine it with the Points Selection Tool to move the rounded corners of the shape so that it fits the length of the speakers (as shown in the background reference image).

Step 5

Ensure that the length of the shape roughly fits that of the speakers in the reference image. 

Step 6

Ensure the you have the object and Move Tool selected. Hold the CTRL button on the keyboard and click and drag the button to duplicate it.

Step 7

Duplicate the object several times until looks roughly the same as the shape of the Game Boy speakers.

Step 8

Ensure that you use the other camera views to ensure that the placement is correct and moved to the right area.

9. How to use Boole

Step 1

Select Boole by clicking on the small arrow on the bottom right of the Array button at the top of the screen.

Step 2

Select the objects that you want the Boole to effect. This will be the front part of the Game Boy and the speakers (which have been grouped together using Alt-G). 

Put both objects into the Boole and make sure that the speakers group is placed below the Game Boy body.

Step 3

By using the Boole create cut outs using the shapes created. 

Step 4

Use the different camera angles to double check the Game Boy model to make sure that it looks correct.

Coming Next

In the second part of the the tutorial series, I'll show you how to:

• Create Materials
• Colour in the Game Boy Model
• Render the Game Boy Model

Follow this tutorial step-by-step to create a retro Nintendo Game Boy that you can use in video games, graphic design and illustration projects whilst learning how to model in Cinema 4D. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images and basic rendering techniques.

In this, the first part of the two-part tutorial, I'll show you how to:

• How to create Materials
• How to Colour the Model
• How to Render the Game Boy 

10. How to Create a New Material

Step 1

Located near the bottom of the screen there should be a material selection window. Click on Create > New Material to create a new material to use that you can edit. I'll use the materials to colour in the various objects and parts of our Nintendo Game Boy.

Step 2

Double click on the new material to bring up the Material Editor. This is where you can adjust the various properties of your material such as the colour, transparency and reflectance etc. 

For this particular style we will only be interested in flat colour.

Step 3

Untick the boxes for Colour and Reflectance and tick the button for Luminance. This gives us the flat colour look for our final image.

Step 4

To add a material to the object, drag and drop the material to the object using the mouse. 

You can also drag and drop the material onto the object listed on the right of the screen.

The same material can be used for multiple parts of the model. For example, you can use this one material for the front, back and middle parts of our Nintendo Game Boy model.

11. How to Adjust the Material Properties

Step 1

In the Material Editor, click on the arrow button next to Texture and select Sketch and Toon > Cel from the menu.

Step 2

Click on the new Cel button that appears next to Texture to bring up a new menu.

Step 3

In this new menu, adjust the settings as follows:

1. Change the Diffuse to match the image at below. It should be greyscale with the colour getting light from left to right.
2. Untick Camera.
3. Tick Lights.
4. Tick Shadows 
5. Select Multiply from the drop down menu.

Step 4

Select a colour by double clicking on the colour option box. 

The Material Editor gives you many different options for choosing and picking your colour. These include RGB, HSV etc. Choose whichever option you are most familiar with as a flat colour. Because of the Multiply shading mode, the different colour shades will also appear in the material.

If the material has already been applied to the model, the colour of the model will automatically be adjusted to the new material colour.

12. How to Adjust the Shading

Step 1

To get a better idea of the shading and how our render will eventually turn out, click on the small black arrow on the bottom right of the Render Button and select Interactive Render Region from the menu. 

Step 2

Adjust the window so that it fits around the Game Boy model. Look for the very small arrow on the right hand side of the window and use the mouse to drag it to the top (this increases the resolution). Decrease the resolution by moving the arrow down if you need to.

Step 3

To change the way the light source is facing go to Options > Default Light.

Add a light object to the scene if you are more comfortable working that way.  

Step 4

In the Default Light window, click where you would like the light source to come from on the sphere and it will sync with the view port. Experiment with different lighting positions to come up with a lighting situation that you like. 

This can be adjusted at anytime.

13. Other Lighting Solutions

Step 1

To set up the basic lighting, you’ll want to go to the Floor button located in the top menu bar. Left Click-Hold and then select Physical Sky from the menu.

Step 2

Ensuring that Physical Sky is selected in the menu on the right, a new menu will appear on the bottom right of the screen. Select the Time and Location tab and choose a time using the left and right arrow keys. This will change the lighting of the scene. Choose a suitable time to light up the scene.

Step 3

To add lighting to the scene, select the Add Light button in the top menu bar at the top of the screen.

This will create a Light Object which you can move around the scene. Move the light object using the Move Tool to a suitable position.

Step 4

To customise the lighting further, experiment with the light object options in the bottom right of the screen. Here you can adjust the Intensity, Light Type and even Colour.

14. How to Colour the Screen

Step 1

Duplicate the material by holding CTRL on the keyboard and then using the mouse to click and drag the material to the side.

Step 2

Double click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 79
• G: 222
• B: 183

We can also click on Cel to change the shading properties of this material if needed.

Step 3

Duplicate the first material again (hold CTRL and click and drag with the mouse).

Step 4

Double click on the new material to open up the Material Editor and select Luminance. From there you can change the colour to the following:

• R: 111
• G: 126
• B: 135

Step 5

To create a flat colour, select Cel and change the properties of Diffuse to one colour.

Step 6

To apply the new materials to the object, use the mouse to drag and drop the materials to the object that you wish to colour. Drag and drop the material to the object list on the right side of the screen.

Drag and drop the screen material onto the Game Boy screen.

Step 7

Drag and drop the dark grey material onto the screen border of the Game Boy.

15. How to Colour the Buttons

Step 1

Duplicate a new material from the first material again (hold CTRL and click and drag with the mouse). Double click on the new material to open up the Material Editor and select Luminance. Change the colour to the following:

• R: 232
• G: 96
• B: 32

Step 2

Duplicate a new material. Double click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 165
• G: 199
• B: 219

Step 3

Drag and drop the light grey material onto the button borders of the Game Boy.

Step 4

Drag and drop the bright red material onto the main buttons of the Game Boy.

16. How to Colour the D-Pad & Small Buttons

Step 1

Duplicate a new material as you did before. Double click on the new material to open up the Material Editor and select Luminance. From there change the colour to the following:

• R: 89
• G: 98
• B: 106

Step 2

Drag and drop the new material onto the D-Pad, Start and Select buttons of the Game Boy.

17. How to Render the Game Boy

Step 1

Click on the Render Settings button located in the top menu bar.

Step 2

In the Save settings you can select the file location that you want to save your image in. Make sure you also choose the format (PNG) and tick Alpha Channel.

You may wish to tick Alpha Channel on, if you want to continue editing the image in another program such as Adobe Photoshop.

Step 3

Under the Output Settings choose the resolution, height and width of the image. This tutorial uses the settings 1920x1200 72dpi.

Step 4

In the Anti-Aliasing settings, select Cubic (Still Image) which can be found under Filter. This will ensure that your render is nice and sharp.

Step 5

Click on the Render button to render your final image. Remember to make sure that you have selected the right view in your viewport (front, right, left or perspective etc.) and that you are happy with the camera angle. 

Choose a suitable angle in the viewport by navigating around the scene.

Step 6

You can also create a camera if you would like greater control over the camera and render options.

The End Result

Wait for the final render to finish. Once the render is complete you can repeat the steps above and change the camera or the view port to create a new image from a different angle. 

Throughout the course of the project you have successfully learnt how to:

• Import Reference Images
• Prepare for Modelling
• Model the retro Game Boy
• Create Materials
• Colour the Model
• Render the Game Boy 

Feel free to share your own creations below. You can also export your image into Adobe Photoshop to enhance it further or to use it as part of a larger image.

Welcome to how to create an abstract icon set in Adobe Illustrator! The theme we're working on will be chess. In this tutorial we will learn the step by step process of how to create an abstract set of icons using basic shapes and tools.

For more examples of abstract icon sets, check out GraphicRiver where you can find a wide variety of different abstract icons.

1. How to Set Up a New Project File

Step 1

Let's get started by setting up a New Document in Adobe Illustrator (File > New or Control-N). For this tutorial, we will use the settings below:

• Number of Artboards: 1
• Width: 850 px
  
• Height: 850 px
  
• Units: Pixels
  

In the Advanced tab, use the following settings:

• Colour Mode: RGB
  
• Raster Effects: Screen (72ppi)
  
• Preview Mode: Default

Step 2

Go to Edit > Preferences > General and set the Keyboard Increment to 1 px. 

Step 3

Go to Units and use the settings shown below. 

• General: Pixel
  
• Stroke: Points
  
• Type: Points

2. How to Set Up the Layers

Step 1

Next, you will need to structure the project by creating layers. Select the Layers panel and create two layers. Name them as follows:

• Layer 1: Background
• Layer 2: Icons

Step 2

Make sure that you select the background layer to begin creating the background.

3. How to Create the Background Color

Step 1

With the background layer selected, click on the Rectangle Tool (M) and create a 850 x 850 rectangular area to place your icons in. This should fit the entire area of the Artboard.

Step 2

Make sure that the rectangle is still selected, and click on the Gradient Tool. In the angle section, select 45 Degrees from the drop-down menu.

Step 3

Select two colors for the gradient. For this tutorial, we will use the following:

• R: 70
• G: 82
• B: 162

Step 4

For the second color, we will use the following:

• R: 138
• G: 105
• B: 173

Step 5

The final background should look like the image below. Lock the background layer by clicking on the lock icon, and click on the icon layer to start creating the icons. 

4. How to Create a Pawn Icon

Step 1

Choose the Pen Tool (P) and adjust the settings of stroke to the following:

• Stroke Weight: 6
  
• Cap: Round Cap
  
• Corner: Miter Join
• Align Stroke: Align Stroke to Center

Step 2

Start by selecting the Ellipse Tool (L) and creating a small circle. To create a perfect circle, press and hold the Shift key on the keyboard whilst clicking and dragging with the mouse.

Step 3

Select the Pen Tool (P) and create two lines underneath the circle.

Step 4

Select the Rounded Rectangle Tool (M) and create a shape underneath the two lines. You can adjust the curvature of the corners by pressing the Up Arrow or the Down Arrow on your keyboard whilst creating the shape (clicking and dragging with the mouse).

With the shape still selected, change it to a fill shape.

Step 5

Duplicate the shape by copying it (Control-C) and then paste it into place (Control-Shift-V). 

Add a stroke to the second shape with a width of 20 pt. For the best results, align the stroke to the outside. 

Step 6

With the second shape still selected, go to the top menu and select Object > Expand to open the Expand window. Make sure both Fill and Stroke are selected, and then click OK.

Step 7

This will create a shape from the stroke. Make sure that the shape is still selected and, using the Pathfinder, click on Unite. This will merge the shape.

Step 8

Change the shape to a stroke by using the Eyedropper Tool (I) and align the stroke to the outside.

Step 9

Use the Ellipse Tool (L) to create a small circle at the bottom to complete the pawn icon.

5. How to Create a Rook Icon

Step 1

To start creating the rook icon, use the Rectangle Tool (M) to create a small rectangle shape.

Step 2

Create a slightly larger rectangle shape and set it to Stroke by using the Eyedropper Tool and selecting one of the strokes we used previously on the pawn icon. 

Step 3

Use the Rectangle Tool (M) to create a small rectangle shape at the top. Then use the Ellipse Tool (L) to create a small circle at the bottom (holding the Shift key on the keyboard to create a perfect circle). 

Step 4

Use the Rectangle Tool (M) and follow the steps below to create the top of the rook icon.

Step 5

Select all the shapes in Step 4 and click on Pathfinder > Unite.

Step 6

This will merge all the shapes together.

Step 7

With the new shape selected, change it into a stroke by using the Eyedropper Tool (I) to ensure that the weight of the stroke is the same.

Step 8

To create the semicircles, you need to start by creating a circle using the Ellipse Tool (L). Place a rectangle over the circle using the Rectangle Tool (M).

Step 9

Select both the shapes (making sure that the rectangle is arranged on top of the circle) and then select Pathfinder > Minus Front.

Step 10

This will remove the rectangle shape and the part of the circle which is overlapping.

Step 11

Duplicate the semicircle by copying it (Control-C) and then pasting it (Control-V).

Step 12

Select the duplicate semicircle and then Right-Click on it. From the menu, select Transform > Select. Choose Vertical axis at 90 Degrees and then click OK.

Step 13

Make sure that both semicircles are aligned horizontally opposite each other.

Step 14

Place the semicircles on either side of the shapes to complete the rook icon.

6. How to Create a Knight Icon

Step 1

To start creating the knight icon, create a duplicate of the rook icon. With the duplicate icon, use the Selection Tool (V) or the Direct Selection Tool (A) to remove the middle shapes of the icon.

Step 2

Use the Polygon Tool to create a triangle. Whilst using the Polygon Tool, press the Up Arrow key or Down Arrow key on the keyboard to increase or decrease the number of sides. 

To create an equilateral triangle,press and hold the Shift key on the keyboard whilst creating the shape.

Create a smaller equilateral triangle and place it in the middle.

Step 3

Rotate the semicircles on either side of the triangle so that the strokes align diagonally (Right Click > Transform > Rotate).

Step 4

To create the head of knight icon, use the Rounded Rectangle Tool and the Ellipse Tool (L) to create the shapes below.

Step 5

Use the Rectangle Tool (M) and place two rectangles above the shapes as shown below.

Step 6

Use the Minus Front Tool on the overlapping shapes. 

Step 7

This will create a straight edge where the shapes used to overlap. Move the two shapes together so that they resemble the image below.

Step 8

Use the Minus Front Tool again to remove the left side of the shape and change them both into a stroke.

Step 9

Select both shapes and use Pathfinder > Unite to combine them into a single shape.

Step 10

Select the Add Anchor Point Tool (+) and add a point near the left corner of the shape. Then use the Direct Selection Tool (A) to drag the top left corner to the left to create the ear.

Step 11

Use the Direct Selection Tool (A) and remove the point shown in the image below.

Step 12

Use the Pen Tool (P) and draw out three extra points on the right side of the shape.

Step 13

Select the curve points and drag them to the middle using the mouse to create the neck of the horse. Hold the Shift key on the keyboard to select multiple points.

Step 14

Once you are happy with the way the horse head looks, use the Ellipse Tool (L) to create the eye (remember to press and hold the Shift key on the keyboard to create a perfect circle).

Step 15

Add a line underneath the head and position it underneath the previous shapes to create the final knight icon.

7. How to Create a Bishop Icon

Step 1

To start creating the bishop icon, create a duplicate of the knight icon. With the duplicate icon, use the Selection Tool (V) or the Direct Selection Tool (A) to remove the top shapes (the horse head) of the icon.

Step 2

Use the Ellipse Tool (L) and hold the Shift key on the keyboard to create a perfect circle on top of the icon.

Step 3

Use the Direct Selection Tool (A) to move the top point of the circle slightly upwards. This will create an egg-like shape.

Step 4

Select the handlebars with the Direct Selection Tool (A) and move them to the middle point to create a teardrop shape.

Step 5

Use the Ellipse Tool (L) to create a circle and place it on top of the teardrop shape. Then use the Pen Tool (P) to create a cross, and place it inside the teardrop shape to create the final bishop icon.

8. How to Create a Queen Icon

Step 1

To start creating the queen icon, create a duplicate of the bishop icon. With the duplicate icon use the Selection Tool (V) or the Direct Selection Tool (A) to remove the top and middle shapes of the icon.

This will leave just the two circles at the bottom and the semicircles on the sides.

Step 2

Rotate the semicircles slightly. To do this, Right-Click on the shapes, and then go to Transform > Rotate, following the image below.

Step 3

Use the Ellipse Tool (L) to create two circles, with the outer circle using a stroke and the inner circle using a fill. Remember to hold the Shift key on the keyboard to create a perfect circle.

Step 4

Use the Ellipse Tool (L) to create two overlapping circles side by side on top of the other shapes.

Step 5

Use the Ellipse Tool (L) to create a small circle on top.

Step 6

To create the base of the crown, use the Pen Tool (P) or the Rectangle Tool (M) to draw the shape as seen in the image below. When using the Pen Tool, you can hold the Shift key on the keyboard in order the draw a straight line vertically or horizontally. This will make it easier to align.

From there, use the Direct Selection Tool (A) to select the curve points (hold Shift to select multiple points) and move the points towards the centre with the mouse to transform the corners into curves.

Step 7

Complete the queen icon by placing the crown on top of the shapes, as shown in the image below.

9. How to Create a King Icon

Step 1

To create the king icon, duplicate the queen icon. With the duplicate icon, use the Direct Selection Tool (A) to delete the middle circle shapes.

Step 2

Use the Direct Selection Tool (A) to delete the small circle shape at the top of the crown.

Step 3

Use the Rectangular Shape Tool (M) to create two squares (one larger outline and one smaller fill shape). Place the smaller square inside and in the middle of the larger square.

From there, select both squares and rotate them both by 45 degrees (Right Click > Transform > Rotate) and place both squares in the centre space of the icon.

Step 4

Use the Pen Tool (P) to create a small cross on top of the crown.

Awesome! You're Finished!

Congratulations! You have successfully completed this tutorial. Feel free to share your own creations below! I hope you found this tutorial helpful and that you've learned many new tips and tricks that you can use for your future illustrations. See you next time!

Learn More Icon Skills!

If you liked this and are looking to learn some new icon skills, check out these tutorials below! Expand your expertise by going through these in-depth guides. Happy designing!

Check out my video course on Animating Icons in Adobe Illustrator and After Effects:

Or why not check out these tutorials:

• 10 Top Tips for Creating Awesome Icons

  Today, I’m going to share with you ten tips on icon design that I’ve managed to isolate and put down in digital ink after doing some research from both my...

• New Course: Animating Icons With Adobe Illustrator and After Effects

  In our new short course, Animating Icons With Adobe Illustrator and After Effects, you'll learn how to design and animate icons from scratch.

• Comparing the Two Methods for Creating Line Icons: Offset Paths vs. Strokes

  This little quick tip is dedicated to a subject that is close to my heart but at the same time gave me some strong headaches in the early days of my design...

• New Course: Designing Game UI Assets in Adobe Illustrator

  In our new course, Designing Game UI Assets in Adobe Illustrator, you'll learn how to design beautiful user interface (UI) elements for your video-game...

• How to Scale Icons Correctly in Adobe Illustrator

  Lately I’ve been getting a lot more technical and started exploring solutions to the different challenges that you might encounter along your creative...

Follow this tutorial step-by-step to create a 3D iPhone model that you can use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images, adding lighting to the scene and basic rendering techniques.

In this, the first part of the two-part tutorial, I'll show you how to:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the iPhone

1. How to Import Reference Images

Step 1

Use the middle mouse button to click anywhere on the viewport. This will display all four views. From there, use the middle mouse button to select the Right view.

Step 2

In the Attributes tab select Mode > View Settings.

Step 3

In Viewport [Right] select the Back button and click on the button next to Image. 

Step 4

Select the reference image from the finder and open it.

Step 5

Once the image is displayed in the background of the viewport, you can change the transparency of the image. This can sometimes make it easier to model from the reference image.

You can also change the position and size of your reference image from here using Offset X, Offset Y, Size X and Size Y.

2. How to Model the Body of the iPhone

Step 1

To start modelling the body of the iPhone, select the Cube object from the top menu bar. This will spawn a cube in the viewport.

Step 2

You can use the reference image of the iPhone in your Front View to help adjust the cube. Use the Scale Tool to make the shape of the cube match up with the shape of the iPhone in the image.

Make sure that you use the other views (front, left, right, perspective etc) to check that your shape looks correct from every angle.

Step 3

With the object still selected, use the mouse to click the Make Editable button. This enables you to adjust the model further, but disables the options for when you first spawn the object.

Step 4

Select the Edge Selection Tool.

Step 5

Use the Edge Selection Tool to select all four corners of the object. The selected edges will be highlighted in orange.

Step 6

Once the edges have been selected, use the mouse to right click on the selected edges. In the menu that appears, find Bevel and select it.

Step 7

In the adjustment window (usually located in the bottom right of the screen), play around with the following:

• Bevel Mode: Chamfer
  
• Offset Mode: Fixed Distance
  
• Offset: 31cm
  
• Subdivision: 10
  
• Depth: 100%
  

Feel free to adjust the sliders and values until you are satisfied with the object's appearance.

Step 8

In the images below you can see how the edges are effected once the values have been changed.

Step 9

Click on the small black arrow in the bottom right corner of the Bend Tool in the top menu bar. Then select Bevel from the list. This will create a Bevel tool in the list of objects on the right of the screen.

Step 10

Select the Bevel tool and drag it into the Cube object. This will apply the bevel features to the cube.

Step 11

Making sure that the Bevel tool is selected in the object list, use the adjustments window to change the way that the bevel works. For this tutorial, the following will be used:

• Use Angle: Tick
  
• Angle Threshold: 68 Degrees
  
• Bevel Mode: Chamfer
  
• Offset Mode: Radial
  
• Offset: 8cm
  
• Subdivision: 6
  

Feel free to adjust the sliders and values until you are satisfied with the object's appearance.

Step 12

In the images below you can see how the cube is effected once the values have been changed. This makes the object appear smoother, which correctly matches the appearance of an iPhone 8.

Step 13

For a more stylised and graphical approach we can reduce the Bevel Subdivisions to a value of 1.

Step 14

This will give the iPhone a sharper bevel for a more stylised look.

3. How to Create the iPhone Screen

Step 1

To start modelling the screen of the iPhone, select the Cube object from the top menu bar. This will spawn a cube in the viewport.

Step 2

Use the reference image of the iPhone in your Front View to help adjust the cube. Use the Scale Tool to make the shape of the cube match up with the shape of the iPhone screen in the image.

Make sure that you use the other views (front, left, right, perspective etc) to check that your shape looks correct from every angle.

Step 3

Once the shape and size of the cube has been adjusted correctly, use the Move Tool to move the screen into position. 

4. How to Create iPhone Home Button

Step 1

To start modelling the home button of the iPhone, select the Cone object from the top menu bar. This will spawn a cone in the viewport.

Step 2

Use the Rotate Tool to rotate the cone by 90 degrees. Ensure that the pointed tip is pointing towards the iPhone.

You can also reduce the height of the cone and the increase the radius of the tip. This helps make the positioning of the button a little bit easier.

Step 3

Use the reference image and the Scale Tool to adjust the cone so that it roughly fits the size of the iPhone home button.

Step 4

Switch to Perspective View and use the Move Tool to place the cone object in the position where the iPhone home button will be.

5. How to use Boole

Step 1

Click on the small black arrow in the bottom right corner of the Array Tool in the top menu bar. Then select Boole from the list. This will create a Boole tool in the list of objects on the right of the screen.

Step 2

Select the cone and body objects from the list and place them inside the Boole Tool. Ensure that the cone object is positioned below the iPhone body.

Step 3

This will create a cut out in the shape of the cone object. You can then adjust the position of the cone object using the Move Tool until you're happy with the appearance of the home button.

Step 4

Ensure that the cone object is selected and select Phong in the adjustments window. Change the Phong Angle to 45 Degrees. This will adjust the smoothing groups of the home button so that they appear correctly.

6. How to use Boole to Create the iPhone Details

Step 1

Use the shape object creations tools (cylinder, cone, cube, tube etc) to create the extra details for the iPhone. This will include things like the camera lens and the phone receiver.

Step 2

Select all the new objects (holding shift) and press Alt-G on the keyboard. This will group the objects into a null group. Make sure that the null group is positioned inside the Boole and below the body object.

Step 3

This will create a cut out in the shape of the objects you initially created. You can then adjust the position of the objects using the Move Tool until you are happy with the appearance.

7. How to Create the iPhone Buttons

Step 1

Use the shape object creations tools (cylinder, cone, cube, tube etc) to create the extra buttons for the iPhone. This will include things like the volume and power buttons.

Step 2

Use the Move Tool and the Rotation Tool to place the buttons in the correct position on the iPhone.

Step 3

You can use the different viewports (left, right, front, perspective) to aid you in positioning the buttons in the correct place. 

Don't forget that the reference image can be used to guide you at this stage as well.

8. How to Create the iPhone Camera

Step 1

Use the shape creation tools to create shapes for the iPhone camera. The cylinder shapes will be used to create the holes via the Boolean tool. Remember to use the reference image to help measure the size and placement.

Step 2

Ensure that the viewport is looking at the back of the iPhone model. You can use the Rotate Tool to rotate the camera shapes 180 degrees if needed. Use the Move Tool to place the shapes correctly on the body of the iPhone. 

The shapes must be placed within the body of the iPhone in order for the Boolean to work correctly (for the camera holes).

Step 3

Select both of the camera holes (shown as the cone shapes named 01.1 and 02.1 in the image). In the object list, move them so that they are inside the Boole group (created for the previous cutouts in section 5 and 6). 

All the cutout objects must be placed underneath the iPhone body object in order to work.

Step 4

Once the shapes have been placed inside the Boole group, the holes should appear correctly inside the iPhone body.

Step 5

Use the same techniques as above to create the other holes on the iPhone.

Create two more cones and place them on top of the rounded camera shape.

Step 6

You'll need to create a new boole group for the new holes to appear because we are using a new object to cut holes into (instead of the iPhone body). 

Step 7

Create a new boole group by placing the objects inside the boole (the cones must be placed below the shape that you want to cut holes out from).

Coming Next...

In the second part of the the tutorial series, I'll show you how to:

• How to Create Coloured Materials
• How to Add Lighting to the Scene
• How to Render the iPhone

Follow this tutorial step-by-step to create a 3D iPhone model to use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images, adding lighting to the scene and basic rendering techniques.

In the first part of the two-part tutorial, I showed you how to:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the iPhone

In this, the second part of the the tutorial series, I'll show you how to:

• How to Create Coloured Materials
• How to Add Lighting to the Scene
• How to Render the iPhone

9. How to Create a New Material

Step 1

Located near the bottom of the screen there is a material selection window. Click on Create > New Material to create a new material to use that you can edit. 

Materials are used to colour in the various objects and parts of the iPhone.

Step 2

Double click on the new material icon (displayed as a sphere). This will bring up the Material Editor, where you can adjust the various properties of the material such as the colour, transparency and reflectance. 

For this particular style we will only be interested in flat colour (Luminance).

Step 3

Tick the button for Luminance and untick the boxes for Colour and Reflectance. This will give the cel shaded look for the final image. 

Step 4

Colour the iPhone body by adding the material to the object. Drag and drop the material to the object using the mouse. You can also drag and drop the material onto the object listed on the right of the screen. 

10. How to Adjust the Material Properties

Step 1

In the Material Editor, click on the arrow button next to Texture and select Sketch and Toon > Cel from the menu.

Step 2

Click on the new Cel button that appears next to Texture to bring up a new menu.

Step 3

In this new menu, adjust the settings as follows:

1. Change the Diffuse to match the image at below. It should be grey scale with the colour getting light from left to right.
2. Untick Camera.
3. Tick Lights.
4. Tick Shadows 
5. Select Multiply from the drop down menu.

Step 4

Select a colour by double-clicking on the colour option box . 

The Material Editor gives many different options for choosing and picking colours. These include RGB, HSV and so on. Choose whichever option you are most familiar with as a flat colour. Because of the Multiply shading mode, the different colour shades will also appear in the material.

If the material has already been applied to the model, the colour of the model will automatically be adjusted to the new material colour. This is useful if you change your mind on a certain colour or a certain part of the iPhone model.

Step 5

Because we've already applied the material to the model, the colour of the iPhone will automatically be adjusted to the new material colour.

11. How to Adjust the Shading

Step 1

To get a  better idea of the shading and how our render will turn out as we work on it, click and hold on the Render Button and select Interactive Render Region from the menu. 

Step 2

Use the mouse to adjust the window so that it fits around the iPhone model. Look for the very small arrow on the right hand side of the window and use the mouse to drag it to the top right corner of the box (this increases the resolution). 

Decrease the resolution by moving the arrow down if you find that the performance is decreasing.

Step 3

To change the way the light source is facing go to Options > Default Light.

You can also add a light object to the scene if you are more comfortable working that way.  

Step 4

Change the light source in the Default Light window. Click where you'd like the light source to come from on the sphere and it will sync with the view port. Experiment with different lighting positions to come up with a lighting situation that you like. 

This can be adjusted at anytime so you can change the lighting again if you changed your mind.

Step 5

Secondary-click on the arrow and select Alpha Mode in order to reveal the rest of the viewport. Some people may find working this way easier.

12. Other Lighting Solutions

Step 1

To set up the basic lighting, go to the Floor button located in the top menu bar. Primary-Click-Hold and then select Physical Sky from the menu.

Step 2

Make sure that Physical Sky is selected in the menu on the right, a new menu will appear on the bottom right of the screen. Select the Time and Location tab and choose a time using the left and right arrow keys. 

This will change the lighting of the scene (according to the time of the day). Choose a suitable time to light up the scene. You'll see how the lighting affects the scene in the viewport.

Step 3

To add a light to the scene, select the Add Light button in the top menu bar at the top of the screen.

This creates a Light Object which you can move around the scene. Move the light object using the Move Tool to a suitable position.

Step 4

To customise the lighting further, experiment with the light object options in the bottom right of the screen. Here you can adjust the Intensity, Light Type and even Colour.

13. How to Colour the iPhone Screen

Step 1

To create a new material we can duplicate the material by holding CTRL on the keyboard and then using the mouse to click and drag the material to the side.

Step 2

Double-click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 56
• G: 47
• B: 66

Step 3

Apply the new material to the screen by clicking and dragging it directly onto the object.

14. How to Colour the iPhone Details

Step 1

Create a new material. You can also duplicate a previous material in order to keep the settings from before.

Double-click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 70
• G: 69
• B: 65

Step 2

Apply the new material to the button objects inside the cutout group. You can also apply the material by clicking and dragging it to the object in the viewport.

Step 3

When the material is applied, the details will change colour to reflect the material.

Step 4

Repeat the same steps for the side buttons. For the side buttons, use the same colour material which was used for the iPhone body.

Step 5

For the back camera details, use the dark grey colour. Remember that you can change the colour of the material at a later date as well.

15. How to Render the iPhone

Step 1

On the top menu bar, click on the Render Settings button. This brings up the render settings window.

Step 2

In the render settings menu, you can change the options to what you need. First, tick the Save Settings to select a file location, file format and alpha channel.

Select Alpha Channel if you wish to keep the background see through.

Step 3

In the Output Settings choose the resolution, height and width of the image. 

Step 4

To ensure that the render is nice and sharp go to the Anti-Aliasing settings. Select Cubic (Still Image) which can be found under Filter. 

Step 5

To create the final image, click on the Render button. Remember to select the right view in the viewport (front, right, left or perspective etc.) and that you're happy with the camera angle. 

Choose a suitable angle in the viewport by navigating around the scene.

Step 6

If you want to have more control over how your final render looks, create a camera object to help. Find a suitable view using the viewport first and then click on the camera button. 

This will create a camera using the current view in the viewport. Check out the camera settings to see how they affect the final render.

The End Result

Wait for the final render to finish. Once the render is complete you can repeat the steps above and change the camera or the view port to create a new image from a different angle. 

Throughout the course of the project you have successfully learnt how to:

• Import Reference Images
• Prepare for Modelling
• Model an iPhone
• Create Materials
• Colour the Model
• Render the iPhone

Feel free to share your own creations below. You can also export your image into Adobe Photoshop to enhance it further or to use it as part of a larger image.

Follow this tutorial step-by-step to create a 3D Smartwatch model that you can use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images, adding lighting to the scene and basic rendering techniques.

In this, the first part of the two-part tutorial, I'll show you:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the Smartwatch

1. How to Import Reference Images

Step 1

Use the middle mouse button to click anywhere on the viewport. This displays all four views. From there, use the middle mouse button to select the Right view.

Step 2

In the Attributes tab select Mode > View Settings.

Step 3

In Viewport [Right] select the Back button and click on the button next to Image. 

Step 4

Select the reference image from the finder and open it.

Step 5

Once the image is displayed in the background of the viewport, change the transparency of the image. This can sometimes make it easier to model from the reference image.

Change the position and size of the reference image from here using Offset X, Offset Y, Size X and Size Y.

2. How to Model the Watch Face

Step 1

To start modelling the face of the Smartwatch, select the Cube object from the top menu bar. This spawns a cube in the viewport.

Step 2

Use the reference image of the Smartwatch in the Front View to help adjust the cube. 

Use the Scale Tool to make the shape of the cube match up with the shape of the Smartwatch in the image.

Ensure that you use the other views (front, left, right, perspective etc) to check that the shape looks correct from every angle.

Step 3

With the object still selected, use the mouse to click the Make Editable button to allow you to adjust the model further.

Clicking the Make Editable button disables the options for when you first spawn the object.

Because of this you must make sure that you are happy with the current shape of the cube before clicking this button.

Step 4

Select the Edge Selection Tool.

Step 5

Use the Edge Selection Tool to select all four corners of the object. The selected edges are highlighted in orange.

Step 6

Once the edges have been selected, use the mouse to right click on the selected edges. In the menu that appears, find Bevel and select it.

Step 7

In the adjustment window (usually located in the bottom right of the screen), play around with the following:

• Bevel Mode: Chamfer
  
• Offset Mode: Fixed Distance
  
• Offset: 50cm
  
• Subdivision: 10
  
• Depth: 100%
  

Feel free to adjust the sliders and values until you are satisfied with the object's appearance.

Step 8

In the images below you can see how the edges are effected once the values have been changed.

Use the reference image of the Smartwatch in the Front View to help whilst you adjust the corners. 

Step 9

Click on the small black arrow in the bottom right corner of the Bend Tool in the top menu bar. Select Bevel from the list. This creates a Bevel tool in the list of objects on the right of the screen.

Step 10

Select the Bevel tool and drag it into the Cube object. This will apply the bevel features to the cube.

Step 11

Ensuring that the Bevel tool is selected in the object list, use the adjustments window to change the way that the bevel works. 

For this tutorial, the following are used:

• Use Angle: Tick
  
• Angle Threshold: 68 Degrees
  
• Bevel Mode: Chamfer
  
• Offset Mode: Radial
  
• Offset: 20cm
  
• Subdivision: 6
  

Feel free to adjust the sliders and values until you are satisfied with the object's appearance.

Step 12

In the images below you can see how the cube is changed once the values have been changed. This makes the object appear smoother, which correctly matches the appearance of the Smartwatch which is being modelled.

Step 13

For a more stylised and graphical approach, reduce the Bevel Subdivisions to a value of 1.

Step 14

This gives the Smartwatch a sharper bevel for a more stylised look. However, if you're going for a more realistic look with a smoother bevel, increase the number of Bevel Subdivisions instead.

3. How to Create the Smartwatch Screen

Step 1

To start modelling the screen of the Smartwatch, duplicate the current object from the list view. Do this by holding CTRL on the keyboard to click and drag a duplicate object.

Step 2

Remove the Bevel Modifier from the duplicate object.

Step 3

Use the Scale Tool to adjust the thickness of the new object.

Ensure that you use the other views (front, left, right, perspective etc) to check that the shape looks correct from every angle.

Step 4

Once the shape and size of the cube has been adjusted correctly, use the Move Tool to move the screen into position.

4. How to Create the Smartwatch Buttons

Step 1

Click on the small back arrow on the Cube button and select Cylinder from the list of options. This will spawn a Cylinder in the scene.

Step 2

Adjust the properties of the Cylinder so that it is facing the correct way, has the correct size and has the desired thickness for the button. 

Use the Move Tool to move the button into the correct place using the background image as the reference. 

The settings for the Cylinder are as follows:

• Radius: 25cm
• Height: 25cm
• Height Segments: 1
• Rotation Segments: 36
• Orientation: -X

Step 3

Ensure that the cylinder is selected and click on the Make Editable Button. 

Step 4

Duplicate the cylinder. This acts as the second button.

Step 5

Now that the object is editable, edit the points. Ensure the second cylinder object is selected and click on Points Button. 

Click on the Rectangle Selection Tool to select the points to edit. Select the points to then move them using the Move Tool.

Step 6

Use the Rectangle Selection Tool to select half of the cylinder. Then use the Move Tool to move the points down.

Step 7

To move the two buttons into position, when moving a whole object, select and use the Model button. If this is not selected, you may find that you'll be moving the points, edges or faces instead.

Step 8

Use the Move Tool to move the two buttons into position.

Step 9

Ensure that you use the other camera views to ensure that the button placement is correct and moved to the right area.

5. How to Create the Watch Strap

Step 1

To start modelling the wrist strap of the Smartwatch, select the Cube object from the top menu bar. 

This spawns a cube in the viewport.

Step 2

Adjust the properties of the cube so that it resembles the appearance of a wrist strap. This is usually represented as a very long rectangular shape. 

The settings for the strap are as follows:

• Size X: 230 cm
• Size Y: 1000 cm
• Size Z: 45 cm

Step 3

In order for the shape to bend correctly, width segments must be added to the object. For a smoother bend more segments should be added (Y).

6. How to use the Bend Deformer 

Step 1

In order to create a suitable bend to the wrist strap you will need to use the Bend Deformer. Select the Bend button from the top menu bar. 

This spawns a bend deformer object in the list view.

Step 2

In the list view move the Bend Deformer into the watch strap object. This means that the deformer will affect and influence the watch strap object only.

Step 3

With the Bend Deformer selected make sure that Fit to Parent has been ticked. The ensures that the deformer affects the whole watch strap.

Step 4

With the Bend Deformer still selected, go to the parameters box and play around with the Strength. 

In this tutorial I used the following settings:

• Strength: 180
  
• Angle: 90

Step 5

In the list view, select the watch strap object again and use the Rotate and Move tools to move it to the correct position on the smart watch.

7. How to Complete the Watch Strap

Step 1

In order to edit the watch strap further click the Make Editable button on the top left corner of the screen.

Step 2

Choose the Polygon Tool and use the Move Tool to extend the tip of the watch strap. 

You'll also notice that by going into an edit mode like this disables the Bend Deformer temporarily. 

Step 3

Once you return to Model Mode by clicking on the model button, the strap appears as normal with the extended geometry.

Step 4

Choose the Edge Tool from the left menu.

Step 5

Use the Edge Tool and the Selection Tool to select the edges of the extended strap.

Step 6

With the edges still selected, use the Bevel Tool to curve the edges.

Step 7

In the edit window, change the settings to the following:

• Bevel Mode: Chamfer 
  
• Offset Mode: Fixed Distance
• Offset: 72 cm
• Subdivision: 30
• Depth: 100%

Step 8

Return to Model Mode to see how the watch strap looks and finalise any further adjustments you'd like to make. 

Once you're happy with the way it looks, duplicate the watch strap. Do this by holding CTRL on the keyboard to click and drag a duplicate object.

Rotate the duplicate strap by 180 degrees and place it on the bottom of the watch.

Coming Next...

In the second part of the tutorial series, I'll show you:

• How to Create Coloured Materials
• How to Add Lighting to the Scene
• How to Render the Smartwatch

Follow this tutorial step-by-step to create a 3D Smartwatch model that you can use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images, adding lighting to the scene and basic rendering techniques.

In the first part of the two-part tutorial, I showed you how to:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the Smartwatch

In this, the second part of the the tutorial series, I'll show you how to:

• How to Create Coloured Materials
• How to Add Lighting to the Scene
• How to Render the Smartwatch

8. How to Create a New Material

Step 1

Located near the bottom of the screen there should be a material selection window. Click on Create > New Material to create a new material to use that you can edit. 

Materials are used to colour in the various objects and parts of the Smartwatch.

Step 2

Double click on the new material icon (displayed as a sphere). This brings up the Material Editor, where you adjust the various properties of the material such as the colour, transparency and reflectance. 

For this particular style you'll only be interested in flat colour (Luminance).

Step 3

Tick the button for Luminance and untick the boxes for Colour and Reflectance. This will give us the cel shaded look for our final image of the Smartwatch.

Step 4

Colour the Smartwatch, starting with the body, by adding the material to the object. Simply drag and drop the material to the object using the mouse. Drag and drop the material onto the object listed on the right of the screen. 

This process is repeated for the other parts of the Smartwatch. The base colour of the Smartwatch is as follows:

• R: 201
• G: 197
• B: 198

Step 5

Apply this material colour to the Smartwatch buttons as well

9. How to Adjust the Material Properties

Step 1

In the Material Editor, click on the arrow button next to Texture and select Sketch and Toon > Cel from the menu.

Step 2

Click on the new Cel button that appears next to Texture to bring up a new menu.

Step 3

In the new menu, adjust the settings as follows:

1. Change the Diffuse to match the image at below. It should be grey scale with the colour getting light from left to right.
2. Untick Camera.
3. Tick Lights.
4. Tick Shadows 
5. Select Multiply from the drop down menu.

Step 4

Select a colour by double-clicking on the colour option box . 

The Material Editor gives you many different options for choosing and picking the colour. These include RGB, HSV etc. Choose whichever option you're most familiar with as a flat colour. Because of the Multiply shading mode, the different colour shades also appears in the material.

If the material has already been applied to the model, the colour of the model is automatically adjusted to the new material colour. This is useful if you change your mind on a certain colour or a certain part of the Smartwatch model.

Step 5

Because you've already applied the material to the model, the colour of the Smartwatch is automatically adjusted to the new material colour.

10. How to Adjust the Shading

Step 1

To get a  better idea of the shading and how our render will turn out as you work on it, click and hold on the Render Button and select Interactive Render Region from the menu. 

Step 2

Use the mouse to adjust the window so that it fits around the Smartwatch model. Look for the very small arrow on the right hand side of the window and use the mouse to drag it to the top right corner of the box (this increases the resolution). 

Decrease the resolution by moving the arrow down if you find that the performance is decreasing.

Step 3

To change the way the light source is facing go to Options > Default Light.

Add a light object to the scene if you are more comfortable working that way. 

Step 4

Change the light source in the Default Light window. Click where you'd like the light source to come from on the sphere and it'll sync with the view port. Experiment with different lighting positions to come up with a lighting situation that you like. 

This is adjusted at anytime so you can change the lighting again if you changed your mind.

11. Other Lighting Solutions

Step 1

To set up the basic lighting, go to the Floor button located in the top menu bar. Left Click-Hold and then select Physical Sky from the menu.

Step 2

Ensure that Physical Sky is selected in the menu on the right, a new menu appears on the bottom right of the screen. Select the Time and Location tab and choose a time using the left and right arrow keys. 

This changes the lighting of the scene (according to the time of the day). Choose a suitable time to light up the scene. You'll see how the lighting affects the scene in the viewport.

Step 3

To add a light to the scene, select the Add Light button in the top menu bar at the top of the screen.

This will create a Light Object which you can move around the scene. Move the light object using the Move Tool to a suitable position.

Step 4

To customise the lighting further, experiment with the light object options in the bottom right of the screen. Here you can adjust the Intensity, Light Type and even Colour.

12. How to Colour the Smartwatch Screen

Step 1

To create a new material we can duplicate the material by holding CTRL on the keyboard and then using the mouse to click and drag the material to the side.

Step 2

Double click on the new material to open up the Material Editor and select Luminance. From there change the colour to the following:

• R: 56
• G: 47
• B: 66

Step 3

Apply the new material to the screen by clicking and dragging it directly onto the object.

13. How to Colour the Smartwatch Wrist Strap

Step 1

Create a new material. Duplicate a previous material in order to keep the settings from before.

Double click on the new material to open up the Material Editor and select Luminance. From there change the colour to the following:

• R: 70
• G: 69
• B: 65

Step 2

Apply the new material to both of the wrist straps by either clicking on the material and dragging it to the objects via the viewport or via the object list window.

14. How to Render the Smartwatch

Step 1

On the top menu bar, click on the Render Settings button. This brings up the render settings window.

Step 2

In the Render Settings menu, change the options to what you need. First you will need to tick the Save Settings to select a file location, file format and alpha channel.

Select Alpha Channel if you wish to keep the background see through. This is useful if you wish to add a background to the image in Adobe Photoshop.

Step 3

In the Output Settings choose the resolution, height and width of the image. 

Step 4

To ensure that the Smartwatch render is nice and sharp, go to the Anti-Aliasing settings. Select Cubic (Still Image) which can be found under Filter. 

Step 5

To create the final image of the Smartwatch, click on the Render button. Remember to make sure that you've selected the right view in your viewport (front, right, left or perspective etc.) and that you're happy with the camera angle. 

Choose a suitable angle in the viewport by navigating around the scene.

Step 6

For more control over how the final render looks, create a camera object to help. Find a suitable view using the viewport first and then click on the camera button. 

This creates a camera using the current view in the viewport. Check out the camera settings to see how they will affect the final render.

The End Result

Wait for the final render to finish. Once the render is complete, repeat the steps above and change the camera or the view port to create a new image from a different angle. 

Throughout the course of the project you've learnt how to:

• Import Reference Images
• Prepare for Modelling
• Model an Smartwatch
• Create Coloured Materials
• Add Lighting to the Scene
• Render the Smartwatch

Feel free to share your own creations below. You can also export your image into Adobe Photoshop to enhance it further or to use it as part of a larger image.

Follow this tutorial step-by-step to create a 3D Nintendo Switch model that you can use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images, adding lighting to the scene and basic rendering techniques.

In this, the first part of the two-part tutorial, I'll show you:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the Switch

1. How to Import Reference Images

Step 1

To use the reference image in this tutorial, you will need to switch your viewport to the Front View. 

Use the middle mouse button to click anywhere on the viewport. This will display all four views—by default this will be perspective, top, right and front. From there, use the middle mouse button to select the Front View.

Step 2

In the Attributes tab select Mode > View Settings.

Step 3

In Viewport [Right] select the Back button and click on the button next to Image. 

Step 4

Select the reference image from the finder and open it. In this tutorial I'll use the front view of a Nintendo Switch to help me.

Step 5

Once the image is displayed in the background of the viewport, you can change the transparency of the image to your liking. This sometimes makes it easier to model from the reference image.

You can also change the position and size of your reference image from here using Offset X, Offset Y, Size X and Size Y.

Note that the reference image will only appear when selecting front view from the viewport.

2. How to Create the Base Model

Step 1

To start modelling the main body of the Nintendo Switch, select the Cube object from the top menu bar. This will spawn a cube in the viewport.

Step 2

Use the reference image of the Nintendo Switch in the Front View to help adjust the cube.

Use the Scale Tool to make the shape of the cube match up with the shape of the Nintendo Switch in the image.

Ensure that you use the other views—front, left, right, perspective etc—to check that the shape looks correct from every angle.

Step 3

The shape of the cube should roughly fit the shape of the Nintendo Switch background image at this stage. 

Select the Move Tool. To duplicate this shape you'll need to hold CTRL button on the keyboard and then click and drag one of the arrows using the mouse. In this case I've used the red arrow to drag the new object along the x-axis.

Step 4

Use the Scale Tool to adjust the shape of the cube to match up with the shape of the blue Joy-Con in the reference image.

Step 5

Use the Perspective View to move around the objects and make sure that the overall thickness of the base objects are correct. In the example below the objects are too thick, so the Scale Tool is used to reduce the thickness (click and drag along the z-axis).

3. How to Curve the Joy-Con Corners

Step 1

Ensure you have the object selected and then click on the Make Editable button to make the object editable. Select the Edge Selection button.

Step 2

Select the two left corners of the Joy-Con using the selection tool. The selected edges will be highlighted in orange.

Step 3

Once the edges have been selected, use the mouse to right click on the selected edges. In the menu that appears, find Bevel and select it.

Step 4

In the adjustment window (usually located in the bottom right of the screen), play around with the following:

• Bevel Mode: Chamfer
  
• Offset Mode: Fixed Distance
  
• Offset: 50 cm
  
• Subdivision: 20
  
• Depth: 100%
  

Feel free to adjust the sliders and values until you are satisfied with the object's appearance. You can also use the Front View and adjust corners to fit the reference image.

Step 5

To make visualising the Joy-Con in the view port easier, switch off the screen object by clicking on the small round grey button (until it turns red). This is located to the right of the screen object in the object manager list view.

Click on the button until it turns green (or grey) to make the object reappear again.

Step 6

With the screen object hidden from view it makes navigating around the Joy-Con a lot easier. Use the reference image in the front view to check the shape of the object.

Step 7

Select the final two corners of the Joy-Con using the Edge Selection tool.

Step 8

Once the edges have been selected, use the mouse to right click on the selected edges. In the menu that appears, find Bevel and select it. Use the Bevel too to curve the two remaining corners of the Joy-Con.

• Bevel Mode: Chamfer
  
• Offset Mode: Fixed Distance
  
• Offset: 10cm
  
• Subdivision: 10
  
• Depth: 100%

4. How to Curve the Screen

Step 1

Select the screen object and click on the Make Editable button followed by the Edge Selection button. 

Ensure that the screen object is no longer hidden by clicking on the small round button in the object manager list view. 

Step 2

To make visualising the screen object in the viewport easier, switch off the Joy-Con object by clicking on the small round grey button (until it turns red). 

This is located to the right of the Joy-Con object in the object manager list view.

Step 3

Once you click on the small round grey button the Joy-Con object should disappear from the viewport. 

Click on the button until it turns green (or grey) to make the object reappear again.

Step 4

Use the Edge Selection tool to select all four corners of the screen object.

Step 5

Once the edges have been selected, use the mouse to right click on the selected edges. In the menu that appears, find Bevel and select it.

Step 6

In the adjustment window (usually located in the bottom right of the screen), play around with the following:

• Bevel Mode: Chamfer
  
• Offset Mode: Fixed Distance
  
• Offset: 15 cm
  
• Subdivision: 10
  
• Depth: 100%
  

Feel free to adjust the sliders and values until you are satisfied with the object's appearance. 

You can also use the Front View and adjust corners to fit the reference image.

5. How to use Boole

Step 1

To create the top corners of the screen, use the Boole tool. To get started with this select the Cylinder object from the top menu bar. This will spawn a cylinder in the viewport.

Step 2

Use the Rotate Tool to rotate the cylinder 90 degrees in the z-axis.

Step 3

Use the Scale Tool to make the cylinder thinner.

Step 4

In the front view, duplicate the cylinder and use the reference image to position the cylinders to the top corners of the screen object.

Step 5

Both cylinder objects should completely cover the corners of the screen. Use the perspective view to move the cylinders into position.

Step 6

Once the cylinder objects are in position, select the Boole Tool from the top menu bar. 

Step 7

In the object manager list view, select both cylinder objects and group them (Alt-G). This will create a 'Null' group containing the selected objects.

Step 8

Move both the screen object and the Null object inside the Boole Tool. Make sure that the screen is positioned above the Null group.

Step 9

Once the objects have been placed within the Boole Tool, the cylinder object will be subtracted from the screen object. 

6. How to Create the Screen

Step 1

To duplicate the screen object, select the it from the object list (found within the Boole tool). Press the CTRL button on the keyboard and click and drag the object you want to duplicate. 

Make sure that the new screen object is outside the Boole tool.

Step 2

Use the Scale Tool to make the new screen object smaller.

Step 3

In the front view you can use the reference image to help adjust the size of the screen.

Step 4

Once you are satisfied with the size of the screen, use the Move Tool to move the object inside and just above the surface of the original screen object.

You can also use the Scale Tool to reduce the thickness of the shape so that it becomes thinner.

7. How to Create Joy-Con Details

Step 1

Isolate the Joy-Con object to make working in the viewport easier. One way you can do this, is by clicking on the small grey button next to the objects you wish to hide (as shown previously).

Step 2

Click on the small back arrow on the Cube button and select Cylinder from the list of options. This will spawn a cylinder in the scene.

Step 3

Rotate the new cylinder object in the x-axis using the Rotation Tool.

Step 4

Use the right view in the viewport to check the size of the cylinder. Then use the Scale Tool to reduce the size of the object so that it can easily fit within the width of the Joy-Con.

Step 5

You can also use the object properties to adjust the size of the cylinder and also the amount of segments it has.

• Radius: 14 cm
• Height: 200 cm
• Height Segments: 1
• Rotation Segments: 36
• Orientation: +x

Step 6

With the new cylinder object selected, click on the Make Editable button.

Step 7

Use the Move Tool and combine it with the Points Selection Tool.

Step 8

In the options window, make sure that the box for 'Only Select Visible Elements' is not selected. This will ensure that you will select all the necessary points.

Step 9

Select the bottom half of the cylinder object.

Step 10

Use the Move Tool to move the selected points down and making the object longer.

Step 11

Use the Selection Tool to select the curved corners on the right of the cylinder shape.

Step 12

Use the Move Tool to move the selected points a little bit to the right to make the object slightly wider.

Step 13

Click on the Model Mode button on the left of the screen and move the shape to the center of the Joy-Con.

Step 14

In the perspective view, use the Move Tool and the Scale Tool to adjust the shape so that it appears slightly above the side surface of the Joy-Con.

Step 15

Create three more cylinder objects and move them into position using the Scale Tool and the Move Tool.

Step 16

Adjust the bottom cylinder using the Points Tool and the Selection Tool. Select the top half of cylinder and move the points up slightly.

Step 17

Return to Model Mode and adjust the shapes so that they resemble the image below.

Step 18

Use the perspective view to move the cylinder objects into position using the Move Tool. The cylinders should be placed within and just above the surface of the Joy-Con.

8. How to Duplicate Joy-Con

Step 1

Select all the objects related to the Joy-Con and group them (Alt-G). This will create a new 'Null Group'.

Step 2

Select the Null group containing the Joy-Con and duplicate it (hold the CTRL button on the keyboard and use the Move Tool).

Step 3

Rotate the new Joy-Con object 180 degrees using the Rotation Tool.

Step 4

In the front view, use the reference image to move the new Joy-Con into position (above the red Joy-Con).

9. How to Create Buttons

Step 1

Select the Cylinder from the top menu.

Step 2

This will spawn a new cylinder object in the viewport. Use the Scale Tool to reduce the size of the cylinder so that it is the same size of the buttons shown in the reference image.

Step 3

Use the reference image to move the cylinder object into position. Then duplicate the cylinder object to create the other three buttons.

Step 4

Use the perspective view to move the buttons into position. The cylinders should be placed within and just above the surface of the Joy-Con.

Step 5

Group the buttons together (Alt-G) and duplicate the new Null object. Use the front view and use the reference image to move the new buttons into a new position above the red Joy-Con.

Step 6

Duplicate one of the cylinder buttons and place it into the Home Button position for the red Joy-Con. Once all the buttons have been placed correctly, unhide the red Joy-Con.

10. How to Create Joystick

Step 1

Click on the small back arrow on the Cube button and select Cylinder from the list of options. This spawns a cylinder in the scene.

Step 2

Use the Scale Tool to reduce the size of the cylinder so that it matches the size of the joystick.

Step 3

Use the Move Tool to move the cylinder into position (use the background reference image in the front view to help with this).

Step 4

In the perspective view use the Scale Tool to reduce the thickness of the cylinder object (click and drag along the z-axis).

Step 5

Duplicate the cylinder object and use the Scale Tool to reduce the size. 

Step 6

Once you are happy with the reduced size of the cylinder, use the Scale Tool to increase the length of the cylinder in the z-axis.

Step 7

Move both cylinder objects into position above the surface of the Joy-Con. Once the joystick is in position, select the top cylinder and duplicate it.

Step 8

Move the new cylinder object into position just above the surface of the Joy-Con. This will act as the base of the joystick.

Step 9

Duplicate one of the cylinders again and use the Scale Tool to reduce its size. Place the smaller cylinder just above the top of the joystick.

Step 10

Use the Boolean Tool to create a cutaway using the two top cylinder objects. Ensure the smaller cylinder is placed below the larger cylinder when viewed in the object manager list view.

11. How to Create Extra Joy-Con Buttons

Step 1

In the top menu bar select the Cube to spawn a cube into the scene.

Step 2

Use the Scale Tool to adjust the cube to the same size as the Capture Button (use the reference image in the front view to help with this). 

Then use the Move Tool to move the cube into position.

Step 3

Curve the corners of the cube using the Bevel Tool. 

Step 4

Use the Move Tool to place the cube object just above the surface of the Joy-Con.

Step 5

Create a new cube object and curve the corners using the Bevel Tool. Click and drag using the mouse to adjust the size of the curve so that it almost resembles a circle.

Step 6

Use the Selection Tool to select half of the object and move it to the left to create the '-button'.

Step 7

In the perspective view, use the Move Tool to move the '- button' into position just above the surface of the Joy-Con.

Step 8

With all the buttons and the joystick in place, the Joy-Con should resemble the image shown below.

12. How to Duplicate Joystick

Step 1

Group the objects that make up the joystick by selecting them and pressing Alt-G on the keyboard. This will create a new 'Null Object'.

Then duplicate the new 'Null Object' but holding the Ctrl button on the keyboard and click drag with the mouse using the Move Tool.

Step 2

Move the new joystick into position using the reference image in the front view.

13. How to Create + Button

Step 1

Duplicate the '- button' and move it into position.

Step 2

Duplicate the button and use the Rotate Tool and the Move Tool to create a cross shape for the '+ button'.

Step 3

Unhide the screen object. With all the buttons and both joysticks in place, the Nintendo Switch should finally be taking shape. 

14. How to Create Bottom Screen Details

Step 1

Duplicate the objects on the side of the Joy-Con and rotate it in the z-axis by 90 degrees.

Step 2

Move the group of objects to the bottom of the screen just above the surface. Once the 'Null Object' is in position, duplicate the group.

Step 3

Select the new group and rotate it 180 degrees. 

Step 4

Group both objects together and position them in the centre of the screen.

15. How to Pose Nintendo Switch

Step 1

Select all the objects associated with each Joy-Con and create separate groups for them. One group for the left Joy-Con and one group for the right Joy-Con.

Use the Move Tool to move each Joy-Con away from the screen slightly as shown in the image below.

Step 2

Move the right Joy-Con up in the y-axis slightly to create an interesting composition. Try out different positions by using the move tool and moving the camera around. 

Coming Next...

In the second part of the the tutorial series, I'll show you how to:

• Create Coloured Materials
  
• Colour in the Nintendo Switch Model
• Render the Nintendo Switch Model

Follow this tutorial step-by-step to create a 3D Nintendo Switch model to use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, importing reference images, adding lighting to the scene and basic rendering techniques.

In the first part (How to Create a Switch in Cinema 4D: Part 1) of the two-part tutorial, I showed you how to:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the Switch

In this, the second part of the the tutorial series, I'll show you how to:

• How to Create Coloured Materials
• Color in the Nintendo Switch Model
• Render the Nintendo Switch Model

16. How to Create a New Material

Step 1

Located near the bottom of the screen there is a material selection window. Click on Create > New Material to create a new material to use that you can edit. 

Materials are used to colour in the the Nintendo Switch.

Step 2

Double-click on the new material icon (displayed as a sphere). This brings up the Material Editor, where you adjust the various properties of the material such as the colour, transparency and reflectance. 

For this particular style you'll only be interested in flat colour (Luminance).

Step 3

Tick the button for Luminance and untick the boxes for Colour and Reflectance. This will give the cel shaded look for the final image. 

Step 4

Colour the body of the Nintendo Switch by adding the material to the object. Drag and drop the material to the object using the mouse. You can also drag and drop the material onto the object listed on the right of the screen. 

17. How to Adjust the Material Properties

Step 1

In the Material Editor, click on the arrow button next to Texture and select Sketch and Toon > Cel from the menu.

Step 2

Click on the new Cel button that appears next to Texture to bring up a new menu.

Step 3

In this new menu, adjust the settings as follows:

1. Change the Diffuse to match the image at below. It should be grey scale with the colour getting light from left to right.
2. Untick Camera.
3. Tick Lights.
4. Tick Shadows 
5. Select Multiply from the drop down menu.

Step 4

Select a colour by double-clicking on the colour option box . 

The Material Editor gives many different options for choosing and picking colours. These include RGB, HSV and so on. 

Choose whichever option you're most familiar with as a flat colour. Because of the Multiply shading mode, the different colour shades will also appear in the material.

If the material has already been applied to the model, the colour of the model will automatically be adjusted to the new material colour. This is useful if you change your mind on a certain colour or a certain part of the Nintendo Switch model. 

Choose the following colours for this tutorial:

• R: 84
• G: 100
• B: 153

Step 5

Because you've already applied the material to the model, the colour of the Switch is automatically adjusted to the new material colour.

18. How to Adjust the Shading

Step 1

To get a  better idea of the shading and how our render will turn out as we work on it, click and hold the Render Button and select Interactive Render Region from the menu. 

Step 2

Use the mouse to adjust the window so that it fits around the Nintendo Switch model. Look for the very small arrow on the right hand side of the window and use the mouse to drag it to the top right corner of the box (this increases the resolution). 

Decrease the resolution by moving the arrow down if you find that the performance is decreasing.

Step 3

To change the way the light source is facing go to Options > Default Light.

You can also add a light object to the scene if you are more comfortable working that way.  

Step 4

Change the light source in the Default Light window. Click where you'd like the light source to come from on the sphere and it will sync with the view port. Experiment with different lighting positions to come up with a lighting situation that you like. 

This can be adjusted at anytime so you can change the lighting again if you changed your mind.

19. Other Lighting Solutions

Step 1

To set up the basic lighting, go to the Floor button located in the top menu bar. Primary-Click-Hold and then select Physical Sky from the menu.

Step 2

Make sure that Physical Sky is selected in the menu on the right, a new menu appears on the bottom right of the screen. Select the Time and Location tab and choose a time using the left and right arrow keys. 

This changes the lighting of the scene (according to the time of the day). Choose a suitable time to light up the scene. You'll see how the lighting affects the scene in the viewport.

Step 3

To add a light to the scene, select the Add Light button in the top menu bar at the top of the screen.

This creates a Light Object which you can move around the scene. Move the light object using the Move Tool to a suitable position.

Step 4

To customise the lighting further, experiment with the light object options in the bottom right of the screen. Here you can adjust the Intensity, Light Type and even Colour.

20. How to Colour the Switch Screen

Step 1

To create a new material we can duplicate the material by holding CTRL on the keyboard and then using the mouse to click and drag the material to the side.

Step 2

Double-click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 81
• G: 223
• B: 185

Step 3

Apply the new material to the screen by clicking and dragging it directly onto the object.

21. How to Colour the Joy-Cons

Step 1

Create a new material. Duplicate a previous material in order to keep the settings from before.

Double-click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 61
• G: 182
• B: 255

Step 2

Duplicate another new material. Double-click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 255
• G: 121
• B: 122

Step 3

Apply the materials to the relevant Joy-Con's by dragging and dropping the colours onto the objects in the viewport. 

Use the list of objects in the object manager on the right of the screen. 

22. How to Color the Switch Details

Part 1

To color the details of the Nintendo Switch (such as the joystick and the buttons etc.) we are going to use the dark blue material which was the first material created to colour in the screen.

• R: 84
• G: 100
• B: 153

Part 2

Apply the material to the rail of the Joy-Con by dragging and dropping it onto the object.

Part 3

Apply the material to the four buttons of the Joy-Con by dragging and dropping it onto the button objects one at a time.

Part 4

Apply the material to the joysick of the Joy-Con by dragging and dropping it onto the objects.

Part 5

Apply the material to the "-" button and the "home" button of the Joy-Con by dragging and dropping it onto the objects.

Part 6

For the remaining details, create a new material which should be a slightly darker colour than the first material that was created. 

Choose the following colours for this tutorial:

• R: 73
• G: 87
• B: 133

Part 7

Apply the new material onto the details highlighted in the image below.

Part 8

For the last part of the Joy-Con, use the main blue colour and apply it by dragging and dropping it onto the object.

Part 9

Repeat the same steps for the second Joy-Con and replace the blue material with the red material.

Part 10

For the final details of the Nintendo Switch apply the dark blue material as shown in the image below.

23. How to Render the Nintendo Switch

Part 1

Click on the camera button to return to the camera view. This should be the same composition used in the previous tutorial 'How to Create a Switch in Cinema 4D: Part 1'.

Part 2

On the top menu bar, click on the Render Settings button. This brings up the render settings window.

Part 3

In the render settings menu, you can change the options to what you need. First, tick the Save Settings to select a file location, file format and alpha channel.

Select Alpha Channel if you wish to keep the background see through.

Part 4

In the Output Settings choose the resolution, height and width of the image. 

Part 5

To ensure that the render is nice and sharp go to the Anti-Aliasing settings. Select Cubic (Still Image) which can be found under Filter. 

Part 6

To create the final image, click on the Render button. Remember to select the right view in the viewport (front, right, left or perspective etc.) and that you're happy with the camera angle. 

Choose a suitable angle in the viewport by navigating around the scene.

Part 7

To create the final image, click on the Render button. Remember to select the right view in the viewport (front, right, left or perspective etc.) and that you're happy with the camera angle. 

Choose a suitable angle in the viewport by navigating around the scene.

The End Result

Wait for the final render to finish. Once the render is complete you can repeat the steps above and change the camera or the view port to create a new image from a different angle. 

Throughout the course of the project you have successfully learnt how to:

• Import Reference Images
• Prepare for Modelling
• Model a Nintendo Switch
• Create Materials
• Colour the Model
• Render the Nintendo Switch

Feel free to share your own creations below. You can also export your image into Adobe Photoshop to enhance it further or to use it as part of a larger image.

Follow this tutorial step-by-step to create a 3D Alarm Clock model that you can use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly and easily. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, adding lighting to the scene and basic rendering techniques.

In the first part of the two-part tutorial, I showed you how to:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the Alarm Clock

In this, the second part of the the tutorial series, I'll show you how to:

• How to Create Colored Materials
• How to Add Lighting to the Scene
• How to Render the Alarm Clock

9. How to Create a New Material

Step 1

Located near the bottom of the screen there should be a material selection window. Click on Create > New Material to create a new material to use that you can edit. 

Materials are used to colour in the various objects and areas of the Alarm Clock. Such as the clock face, the hands and the bells.

Step 2

Double click on the new material icon (displayed as a sphere). This brings up the Material Editor, where you adjust the various properties of the material such as the colour, transparency and reflectance. 

For this particular style I'm only be interested in flat colour (Luminance).

Step 3

Tick the button for Luminance and untick the boxes for Color and Reflectance. This gives the cel shaded look for our final image of the Alarm Clock.

Step 4

Colour the Alarm Clock by adding the material to your object. Drag and drop the material to the object using the mouse. 

You may drag and drop the material onto the object listed on the right of the screen. 

This process will be repeated for the other parts of the Alarm Clock. The base colour of the Alarm Clock are as follows:

• R: 248
• G: 62
• B: 81

Step 5

Apply this colour to the two bells and the ringer as well.

10. How to Use Sketch and Toon

Step 1

In the Material Editor, click on the arrow button next to Texture and select Sketch and Toon > Cel from the menu.

Step 2

Click on the new Cel button that appears next to Texture to bring up a new menu.

Step 3

In this new menu, adjust the settings as follows:

1. Change the Diffuse to match the image at below. It should be grey scale with the colour getting light from left to right
2. Un-tick Camera
3. Tick Lights
4. Tick Shadows 
5. Select Multiply from the drop down menu

Step 4

Select a colour by double-clicking on the Color option box . 

The Material Editor gives many different options for choosing and picking a colour. These include RGB, HSV etc. 

Choose whichever option you're most familiar with as a flat colour. Because of the Multiply shading mode, the different colour shades will also appear in the material.

If the material has already been applied to the model, the colour of the model is automatically be adjusted to the new material colour. This is useful if you change your mind on a certain colour or a certain part of the Alarm Clock model.

Step 5

Because you've already applied the material to the model, the colour of the Alarm Clock will is adjusted to the new material colour. Click on the Render View button to preview the render.

11. How to Adjust the Shading

Step 1

To get a better idea of the shading and how the render will turn out as you work on it, click and hold on the Render Button and select Interactive Render Region from the menu. 

Step 2

Use the mouse to adjust the window so that it fits around the Alarm Clock model. 

Look for the very small arrow on the right hand side of the window and use the mouse to drag it to the top right corner of the box. This increases the resolution. 

Decrease the resolution by moving the arrow down if you find that performance is suffering.

Step 3

Right-click on the small arrow and select Alpha Mode. This removes the black background.

Step 4

To change the way the light source is facing go to Options > Default Light.

Change the light source in the Default Light window. Click where you would like the light source to come from on the sphere and it will sync with the view port. 

Experiment with different lighting positions to come up with a lighting situation that you like. 

This can be adjusted at anytime so you can change the lighting again if you changed your mind.

12. Other Lighting Solutions

Step 1

To set up the basic lighting, go to the Floor button located in the top menu bar. Left Click-Hold and then select Physical Sky from the menu.

Step 2

Make sure that Physical Sky is selected in the menu on the right, a new menu will appear on the bottom right of the screen. Select the Time and Location tab and choose a time using the left and right arrow keys. 

This changes the lighting of the scene, according to the time of the day. Choose a suitable time to light up the scene. You will be able to see how the lighting will affect the scene in the viewport.

Step 3

To add a light to the scene, select the Add Light button in the top menu bar at the top of the screen.

This will create a Light Object which you can move around the scene. Move the light object using the Move Tool to a suitable position.

Step 4

To customise the lighting further, experiment with the light object options in the bottom right of the screen. Here, adjust the Intensity, Light Type and even Color.

13. How to Colour the Clock Face

Step 1

To create a new material, duplicate the material by holding CTRL on the keyboard and then using the mouse to click and drag the material to the side.

Step 2

Double-click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 247
• G: 244
• B: 225

Step 4

Use the selection tool to highlight the polygons on the face of the clock. This is the area that will be coloured using the new material.

Step 5

Apply the colour by click and dragging the new material directly on to the highlighted selection.

14. How to Color the Hands and Legs

Step 1

Create a new material. You can also duplicate a previous material in order to keep the settings from before.

Double click on the new material to open up the Material Editor and select Luminance. From there we can change the colour to the following:

• R: 70
• G: 69
• B: 65

Step 2

Apply the new material to the legs, bell stands and the clock hands by either clicking on the material and dragging it to the objects via the viewport or via the object list window.

15. How to Render the Alarm Clock

Step 1

On the top menu bar, click on the Render Settings button. This brings up the render settings window.

Step 2

In the render settings menu, change the options to what you need. First you'll need to tick the Save Settings to select a file location, file format and alpha channel.

Select Alpha Channel if you wish to keep the background see through. This could be useful if you wanted to add a background to the image in Adobe Photoshop.

Step 3

In the Output Settings choose the resolution, height and width of the image. 

Step 4

To ensure that the Alarm Clock render is nice and sharp, go to the Anti-Aliasing settings. Select Cubic (Still Image) which is found under Filter. 

Step 5

To create the final image of the Alarm Clock, click on the Render button. Remember to ensure you've selected the correct view in the viewport (front, right, left or perspective etc.) and that you're happy with the camera angle. 

Choose a suitable angle in the viewport by navigating around the scene.

Step 6

If you want to have more control over how the final render looks, create a camera object to help. Find a suitable view using the viewport first and then click on the camera button. 

This creates a camera using the current view in the viewport. Check out the camera settings to see how they affect the final render.

The End Result

Wait for the final render to finish. Once the render is complete, repeat the steps above and change the camera or the view port to create a new image from a different angle. 

Throughout the course of the project you have successfully learnt:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the Alarm Clock
• How to Create Coloured Materials
• How to Add Lighting to the Scene
• How to Render the Alarm Clock

Feel free to share your own creations below. You can also export your image into Adobe Photoshop to enhance it further or to use it as part of a larger image.

Follow this tutorial step-by-step to create a 3D Alarm Clock model that you can use in video games, graphic design and illustration projects whilst learning Cinema 4D quickly and easily. 

Some of the skills you'll learn in this tutorial include creating basic 3D modelling, adding lighting to the scene and basic rendering techniques.

In this, the first part of the two-part tutorial, I'll show you how to:

• How to Import Reference Images
• How to Prepare for Modelling
• How to Model the Alarm Clock

1. How to Import Reference Images

Step 1

To use the reference image in this tutorial, you will need to switch your viewport to the Front View. 

Use the middle mouse button to click anywhere on the viewport. This displays all four views (by default this will be perspective, top, right and front). From there, use the middle mouse button to select the Front View.

Step 2

In the Attributes tab select Mode > View Settings.

Step 3

In Viewport [Right] select the Back button and click on the button next to Image. 

Step 4

Select the reference image from the Finder and open it. In this tutorial I'll use the front view of an Alarm Clock from Envato Elements to help me.

Step 5

Adjust the image size and transparency to your liking in the Properties window.

2. Adjust and Edit the Cylinder Shape

Step 1

In the top menu bar click and hold on the Cube Button (or click on the small black arrow in the bottom right corner of the button). 

In the menu that appears select the Cylinder Button to spawn a cylinder into the scene.

Step 2

You may need to rotate the cylinder in order to get the right orientation. 

To do this click on the Rotate Tool button and use the tool to rotate the cylinder 90 degrees so that the circular face is pointing forward.

Step 3

Click on the Object tab in the Properties window. Adjust the size so that the shape of the cylinder fits the shape of the Alarm Clock background image. For this tutorial the following properties are used:

• Radius: 140 cm
• Height: 100 cm
• Height Segments: 1
• Rotation Segments: 80
• Orientation: +Y

Step 4

Click on the Caps tab of the properties window. Make sure that Caps has been ticked and the Segments are set to a value of 2.

Step 5

By activating caps and setting the segments value to 2, you will see that an extra cap has been created on the face of the cylinder. The shape of the cylinder should roughly fit the shape of the Alarm Clock background image at this stage. 

Ensure that you check the shape using the other camera views as well (perspective, side and top etc).

Step 6

Ensure the cylinder is still selected and then click on the Make Editable button to make the shape editable. 

Next select the Polygon Selection button which will allow you to select the polygons of the object.

Step 7

Hover the mouse over the face of the cylinder and select all of it's faces (click and hold on the mouse button to select a large area).

Step 8

Once all the polygons have been selected, right click on the selected area and select the Bevel Tool.

Step 9

Click and drag over the selected area to create a beveled edge for the cylinder. Repeat the steps for the other side.

Step 10

Use the Selection Tool again and select all the polygons in the centre of the circle. Then use the Scale Tool to enlarge it (click and drag in the area outside the object to uniform scale).

Step 11

Right-click on the selection and click on the Extrude Tool.

Step 12

Click and drag over the selected area to move the polygons inside the cylinder.

Step 13

With the polygons still selected, use the Scale Tool to scale the selection down, making it slightly smaller.

Step 14

Delete the Phong Tag from the cylinder. This sharpens all the edges and faces of the model. This is further illustrated in step 15.

Step 15

In the image below you will see how the edges of the cylinder are very smooth at first before deleting the Phong Tag. 

Once the Phong Tag has been deleted, the edges sharpen.

3. How to Create a Hemisphere

Step 1

Clear the viewport to make modelling the hemisphere easier. 

To do this you must hide the cylinder model by clicking on the small little grey circle until it turns red. To make it appear in the viewport again, click on the grey circle until it becomes green or grey.

Step 2

Create a Sphere by clicking on Cube > Sphere.

Step 3

Use the Scale Tool to scale the reduce the size of the sphere so that it matches the size of the bells as closely as possible.

Step 4

In the properties window, select the Object Tab and set the properties to the following:

• Radius: 55 cm
• Segments: 50
• Type: Hemisphere

Step 5

By selecting the type to Hemisphere, the shape will be split in half as shown in the image below.

4. Add Thickness to an Object

Step 1

To add thickness to the hemisphere you will first need to make it into an editable object. Make sure that the object is selected and click on the Make Editable button.

Step 2

In the top menu bar, select Simulate > Cloth > Cloth Surface.

Step 3

In the List View, move the sphere object below the newly created Cloth Surface.  

Step 4

Ensure the Cloth Surface has been selected and select the Object tab in the properties window. Set the properties to the following:

• Subdivisions: 1
• Factor: 100%
• Thickness: 10 cm

Step 5

Adjusting the Thickness value in the properties window changes the thickness of the hemisphere.

5. Create the Alarm Clock Bell

Step 1

Rotate the hemisphere by 180 Degrees so that it starts to take on the appearance of the bell.

Step 2

In the Front View, use the reference image to ensure the size of the hemisphere is roughly the same size as the bells.

Step 3

Create a capsule by selecting the Capsule Button from the shapes menu.

Step 4

Ensure the capsule object is selected and change the properties to the following:

• Radius: 10 cm
• Height: 200 cm
• Height Segments: 1
• Cap Segments: 8
• Rotation Segments: 36
• Orientation: +Y

Step 5

Use the Move Tool to move the capsule down so that only a little bit of the tip is sticking out from the top of the hemisphere.

Step 6

Select both the Capsule and the Cloth Surface by clicking and holding the Shift Key on the keyboard. Then group them by pressing Alt-G on the keyboard. You can then rename the Null by double clicking on it.

Step 7

Make sure that the new group is still selected, use a combination of the Move Tool and the Rotation Tool to position the bell correctly. You can use the reference image to guide you.

Step 8

Reveal the cylinder shape by clicking on the small red circle until it is grey (or green) again.

Step 9

You can then make any final adjustments to the bell's position by comparing it to the reference image and the cylinder.

6. How to use Symmetry in Cinema 4D

Step 1

In the top menu bar select Array > Symmetry.

Step 2

In the list window move the group containing the bell objects inside the Symmetry Modifier.

Step 3

Anything inside the Symmetry Modifier will create a symmetrical object.

7. Add Legs and Details to the Alarm Clock

Step 1

Use the Capsule Object to create legs for the alarm clock. Do this by creating a new capsule object and using the Move Tool and the Rotate Tool to position it into place.

Another way you can do this is by duplicating the capsule (hold the CTRL button on the keyboard whilst using the Move Tool) which was used to create the bell. 

Move the duplicated capsule into position using the Move Tool and the Rotate Tool.

Step 2

Duplicate the leg by using the Symmetry Modifier. 

Step 3

Adjust the size and radius of the legs by going to the Object tab in the Properties window.

Step 4

Create a new Capsule and place it in on top of the alarm clock.

Step 5

Create a new Sphere and scale it down using the Scale Tool. Place the small sphere on top of the capsule.

8. Create the Clock Hands

Step 1

Create a new Cylinder by clicking on Cube > Cylinder from the top menu bar.

Step 2

Adjust the size of the cylinder in the Properties window so that it matches the width of the clock hand. Use the reference image in the front view to help you with this. The settings for the hand used in this tutorial are as follows:

• Radius: 10 cm
• Height: 10 cm
• Height Segments: 1
• Rotation Segments: 60
• Orientation: +Y

Step 3

Ensure the cylinder is selected and then click on the Make Editable button.

Step 4

To edit the shape further select the Points Tool and then select the Rectangle Selection Tool.

Step 5

Then go to the Properties window and un-tick Only Select Visible Elements. This allows you to select all the points within the rectangle selection.

Step 6

Use the Rectangle Selection Tool to select all the points in the bottom half of the cylinder. 

Select and use the Move Tool and move all the selected points down to create the clock hand.

Step 7

When moving a whole object, select and use the Model button. If this is not selected, you may find that you will be moving the points, edges or faces instead.

Step 8

Position the clock hand object by using the Move Tool.

Step 8

YUse the Scale Tool to adjust the scale of the object once it is in place.

Step 9

Duplicate the clock hand object by using the Move Tool and holding the CTRL button on the keyboard.

Step 10

Once you have the hands, position both on the clock face by using the Move Tool and the Rotation Tool. 

Use the Scale Tool to make one hand smaller if you wish.

Coming Next...

In the second part of the the tutorial series, I'll show you how to:

• How to Create Coloured Materials
• How to Add Lighting to the Scene
• How to Render the Alarm Clock