• 02/03/15 03:19 PM
    Sign in to follow this  

    Making a Game with Blend4Web Part 6: Animation and FX

    Engines and Middleware

    This time we'll speak about the main stages of character modeling and animation, and also will create the effect of the deadly falling rocks.

    Character model and textures

    The character data was placed into two files. The character_model.blend file contains the geometry, the material and the armature, while the character_animation.blend file contains the animation for this character. The character model mesh is low-poly:
    gm06_img02.jpg?v=20141022153048201407181
    This model - just like all the others - lacks a normal map. The color texture was entirely painted on the model in Blender using the Texture Painting mode:
    gm06_img03.jpg?v=20141022153048201407181
    The texture then has been supplemented (4) with the baked ambient occlusion map (2). Its color (1) was much more pale initially than required, and has been enhanced (3) with the Multiply node in the material. This allowed for fine tuning of the final texture's saturation.
    gm06_img04.jpg?v=20141022153048201407181
    After baking we received the resulting diffuse texture, from which we created the specular map. We brightened up this specular map in the spots corresponding to the blade, the metal clothing elements, the eyes and the hair. As usual, in order to save video memory, this texture was packed into the alpha channel of the diffuse texture.
    gm06_img05.jpg?v=20141022153048201407181

    Character material

    Let's add some nodes to the character material to create the highlighting effect when the character contacts the lava.
    gm06_img06.jpg?v=20141022153048201407181
    We need two height-dependent procedural masks (2 and 3) to implement this effect. One of these masks (2) will paint the feet in the lava-contacting spots (yellow), while the other (3) will paint the character legs just above the knees (orange). The material specular value is output (4) from the diffuse texture alpha channel (1).
    gm06_img07.jpg?v=20141022153048201407181

    Character animation

    Because the character is seen mainly from afar and from behind, we created a simple armature with a limited number of inverse kinematics controlling bones.
    gm06_img08.jpg?v=20141022153048201407181
    A group of objects, including the character model and its armature, has been linked to the character_animation.blend file. After that we've created a proxy object for this armature (Object > Make Proxy...) to make its animation possible. At this game development stage we need just three animation sequences: looping run, idle and death animations.
    gm06_img09.jpg?v=20141022153048201407181
    Using the specially developed tool - the Blend4Web Anim Baker - all three animations were baked and then linked to the main scene file (game_example.blend). After export from this file the animation becomes available to the programming part of the game.
    gm06_img10.jpg?v=20141030124956201407181
    Special effects During the game the red-hot rocks will keep falling on the character. To visualize this a set of 5 elements is created for each rock:
    1. the geometry and the material of the rock itself,
    2. the halo around the rock,
    3. the explosion particle system,
    4. the particle system for the smoke trail of the falling rock,
    5. and the marker under the rock.
    The above-listed elements are present in the lava_rock.blend file and are linked to the game_example.blend file. Each element from the rock set has a unique name for convenient access from the programming part of the application. Falling rocks For diversity, we made three rock geometry types:
    gm06_img12.jpg?v=20141022153048201407181
    The texture was created by hand in the Texture Painting mode:
    gm06_img13.jpg?v=20141030124956201407181
    The material is generic, without the use of nodes, with the Shadeless checkbox enabled:
    gm06_img14.jpg?v=20141030124956201407181
    For the effect of glowing red-hot rock, we created an egg-shaped object with the narrow part looking down, to imitate rapid movement.
    gm06_img15.jpg?v=20141030124956201407181
    The material of the shiny areas is entirely procedural, without any textures. First of all we apply a Dot Product node to the geometry normals and vector (0, 0, -1) in order to obtain a view-dependent gradient (similar to the Fresnel effect). Then we squeeze and shift the gradient in two different ways and get two masks (2 and 3). One of them (the widest) we paint to the color gradient (5), while the other is subtracted from the first (4) to use the resulting ring as a transparency map.
    gm06_img16.jpg?v=20141030124956201407181
    The empty node group named NORMAL_VIEW is used for compatibility: in the Geometry node the normals are in the camera space, but in Blend4Web - in the world space.

    Explosions

    The red-hot rocks will explode upon contact with the rigid surface.
    gm06_img17.jpg?v=20141030124956201407181
    To create the explosion effect we'll use a particle system with a pyramid-shaped emitter. For the particle system we'll create a texture with an alpha channel - this will imitate fire and smoke puffs:
    gm06_img18.jpg?v=20141030124956201407181
    Let's create a simple material and attach the texture to it:
    gm06_img19.jpg?v=20141030124956201407181
    Then we setup a particle system using the just created material:
    gm06_img20.jpg?v=20141030124956201407181
    Activate particle fade-out with the additional settings on the Blend4Web panel:
    gm06_img21.jpg?v=20141030124956201407181
    To increase the size of the particles during their life span we create a ramp for the particle system:
    gm06_img22.jpg?v=20141030124956201407181
    Now the explosion effect is up and running!
    gm06_img23.jpg?v=20141030124956201407181

    Smoke trail

    When the rock is falling a smoke trail will follow it:
    gm06_img11.jpg?v=20141030124956201407181
    This effect can be set up quite easily. First of all let's create a smoke material using the same texture as for explosions. In contrast to the previous material this one uses a procedural blend texture for painting the particles during their life span - red in the beginning and gray in the end - to mimic the intense burning:
    gm06_img24.jpg?v=20141030124956201407181
    Now proceed to the particle system. A simple plane with its normal oriented down will serve as an emitter. For this time the emission is looping and more long-drawn:
    gm06_img25.jpg?v=20141030124956201407181
    As before this particle system has a ramp for reducing the particles size progressively:
    gm06_img26.jpg?v=20141030124956201407181

    Marker under the rock

    It remains only to add a minor detail - the marker indicating the spot to which the rock is falling, just to make the player's life easier. We need a simple unwrapped plane. Its material is fully procedural, no textures are used.
    gm06_img27.jpg?v=20141030124956201407181
    The Average node is applied to the UV data to obtain a radial gradient (1) with its center in the middle of the plane. We are already familiar with the further procedures. Two transformations result in two masks (2 and 3) of different sizes. Subtracting one from the other gives the visual ring (4). The transparency mask (6) is tweaked and passed to the material alpha channel. Another mask is derived after squeezing the ring a bit (5). It is painted in two colors (7) and passed to the Color socket.
    gm06_img28.jpg?v=20141030124956201407181

    Conclusion

    At this stage the gameplay content is ready. After merging it with the programming part described in the previous article of this series we may enjoy the rich world packed with adventure! Link to the standalone application The source files of the models are part of the free Blend4Web SDK distribution.


      Report Article
    Sign in to follow this  


    User Feedback

    Create an account or sign in to leave a review

    You need to be a member in order to leave a review

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now


    Report ·

      

    Share this review


    Link to review

    Report ·

      

    Share this review


    Link to review

    Report ·

      

    Share this review


    Link to review