How can we develop excellent HTML5 games? -Explanation of Disney's game technology in finding the path to Oz (1)

Preface

Disney's "Find your way to Oz" game, which is close to the ground 《ProgramStarting from the status quo of HTML5 mobile applications, this article published by member magazineArticleI have mentioned that it borrowed the setting of the recently released movie "The Wizard of magic" (from the classic story "The Wizard of Oz", and those who have watched this movie will be deeply touched ), built an equivalent grand game world. At the same time, Disney cooperates with Google to use it as a show case for Chrome browser performance and HTML5 technology. For such an HTML5 game that uses multiple advanced technologies such as webgl 3D, camera, and 3D sound effects, supports desktop and mobile terminals, and delivers outstanding quality, understanding the implementation principles and skills behind it is of great reference significance to us.

This article has long been intended to be translated to help you better understand HTML5 applications in Game Development and Foreign applications. However, this article is too long to be published in multiple times, to serve readers.

This tutorial is difficult and advanced in my recent HTML5 introduction. It is suitable for experienced developers to read and learn.

Introduction

"Finding the path to Oz" is Disney's new experience for Google Chrome. It allows you to cross the Kansas circus on an interactive journey and then reach the Oz kingdom through a huge storm.

Our goal is to combine the technical capabilities of browsers to create a fun and immersive experience that allows users to form a strong connection with movies.

The work of this game is too huge, so we can only list some chapters and write the technical stories we think are interesting. The difficulty of the tutorial increases with the progress.

Many of us have worked hard to create better experiences, but too many of them cannot be listed one by one. Visit this website to experience the complete story on the entire page.

Preview

Finding the path to Oz on the PC is a rich and immersive world. We combine 3D with traditional movie production inspiration to create a realistic effect on several layers. Among them, the most prominent technology is to use three. js to introduce webgl and use the css3 feature to customize the coloring tool and Dom animation elements. In addition, the getusermedia API (WebRTC) enhances the interactive experience, allows users to add their own images directly from the camera, and brings 3D sound effects to webaudio.

However, the magic of this technical experience is how they are integrated. This is also one of the main challenges: how to combine visual effects and interaction elements to create a consistent scenario? This visual complexity is very difficult to manage: it is hard to tell at any time what scenarios we need to develop.

To solve the problem of visual effects and optimization, we used a large number of control panels to capture all the relevant settings at the time point we were checking. In the browser, you can modify everything in the scenario in real time, such as brightness, vertical depth, and gamma line. Anyone can try to adjust the value of important parameters in the experience to participate and find the best effect.

Before sharing our secret, I would like to remind you that it may cause a crash. Make sure that you are not browsing anything important and add it when visiting the website? DEBUG = on. Wait for the website to load. Once you enter and press Ctrl + I, a drop-down menu appears on the right hand side. If you deselect the exit camera path option, you can use the, W, S, d keys and mouse to move freely in the space.

We will not detail all the settings here, but we encourage you to experiment: press the key to display different settings in different scenarios. In the final storm scenario, there is an additional set of buttons: Ctrl + A, you can switch the playing animation. In this scenario, if you press ESC to exit the mouse lock function, press Ctrl + I again to enter the special settings of the storm scenario. Take a look around and capture beautiful postcards like below.

To make sure that we have sufficient flexibility for our needs, we use a great name called dat. gui framework (here you can look at the previous tutorials on how to use it ). It allows us to quickly change the settings exposed to visitors.

It looks a bit like a scene

Many classic Disney movie and animation creation scenarios mean merging different layers. There are exterior layers, unit animation layers, and physical setting layers and top layers obtained through glass painting: this technology is called landscape painting.

In many ways, the structure of the experience we create is similar, even if some "layers" far exceed the static visual effects. In fact, they influence how things look based on more complex computations. However, at least at the level of the big picture, we process the view and combine one view into another. At the top, you can see a UI Layer under which a 3D scene is composed of different scene components.

The top interface layer is created using Dom and CSS 3. Event communication uses the backbone router + onhashchange HTML5 event to control the region response animation. (ProjectSource code:/Develop/coffee/router. Coffee ).

Tutorial: SPRITE table and retina support

We rely on an interesting optimization technique to merge multiple interface layer images into a single PNG to reduce server requests. In this project, the interface consists of more than 70 images (excluding 3D textures), and all are pre-loaded to reduce the delay of the website. You can see the latest sprite table here:

Normal display-http://findyourwaytooz.com/img/home/interface_1x.png

Retina display-http://findyourwaytooz.com/img/home/interface_2x.png

The following are some tips on how to take advantage of Sprite tables, how to use them on retina devices, and how to set interfaces as concise and neat as possible.

Create a Sprite table

We use texturepacker to create any sprite table type you need. In this case, we use easeljs, which is very clean and can be used to create an animated Sprite.

Use the generated sprite table

Once a Sprite table is created, you should see the following JSON file:

 

{"Images": ["interface_2x.png"], "frames": [2, 1837, 88,130], [2, 2, 1472,112], [1008,774, 70, 68], [562,196 0, 86, 86], [473,196 0, 86, 86], "animations": {"allow_web": [0], "bottomheader": [1], "button_close": [2], "button_facebook": [3], "button_google": [4]},}
 

Where:

 

• The address that images points to the sprite table.
• Frames is the coordinates of each UI element.[X, y, width, height]
• Animations is the name of each item.

 

Please note that we have used a high-definition image to create a Sprite table, and then we only need to adjust the image size to half to create a normal version.

Integrate everything

Now, we only need a piece of JavaScriptCodeTo use it.

VaR ssasset = function (asset, Div) {var CSS, X, Y, W, H; // divide the coordinates by 2 as retina devices have 2x density x = math. round (asset. x/2); y = math. round (asset. y/2); W = math. round (asset. width/2); H = math. round (asset. height/2); // create an object to store CSS attributes CSS = {width: W, height: H, 'background-image': "URL (" + asset. image_1x_url + ")", 'background-size': "" + asset. fullsize [0] + "PX" + asset. fullsize [1] + "PX", 'background-position': "-" + x + "PX-" + Y + "PX "}; // If retina devices if (window. devicepixelratio = 2) {/* Set-WebKit-image-set for 1X and 2x all the calculations of X, Y, width and height is taken care by the browser */CSS ['background-image'] = "-WebKit-image-set (URL (" + asset. image_1x_url + ") 1x,"; CSS ['background-image'] + = "URL (" + asset. image_2x_url + ") 2x)";} // set the CSS to the DIV div.css (CSS );};

This is how you use its code:

 
Logo = new ssasset ({fullsize: [1024,102 4], // image 1x dimensions array [x, y] X: 1790, // asset X coordinate on spritesheet Y: 603, // asset y coordinate on spritesheet width: 122, // asset width Height: 150, // asset height image_1x_url: 'img/spritesheet_1x.png ', // background image 1x URL image_2x_url: 'img/spritesheet_2x.png '// background image 2x URL}, $ (' # logo '));
 

Download the complete example here

If you want to learn more about variable pixel density, you can refer to Boris SMUs's article.

3D content Pipeline

The environment experience is built on the webgl layer. When you think of a 3D scenario, one of the toughest problems is how to ensure that you can create the most expressive content from the areas of modeling, animation, and special effects. In many aspects, the core of this problem is the content pipeline: using a set program to create content from a 3D scenario.

We want to create an exciting world, so we need a reliable process to help 3D artists create it. They will need to give their 3D modeling and animation software as much freedom of expression as possible, and we will need to present them on the screen through code.

We have been working on this kind of problem for a while, because every time we created a 3D website in the past, we found some restrictions on using tools. Later we created this 3DLibrarianOfTool, is preparing to apply it to the real work.

This tool has some history: It was originally created for flash and will allow you to optimize a large Maya scenario as a single compressed file during package splitting. This is the optimal reason because it effectively wraps the scenario into basically the same data structure and operates during rendering and animation. In this way, only a small amount of parsing is required during file loading. The decommission speed in Flash is very fast. Because the file is in the AMF format, flash can decompress the package locally. When the same format is used in webgl, the CPU needs to do more work. In fact, we have to re-create a javascript code layer to decompress the files and recreate the data structure required by webgl. Decompression of the entire 3D scenario is a burden on the CPU: it takes about 2 seconds to unpack the game scenario 1 on a high-end server. Therefore, we use the Web workers technology to implement the "Scenario setting" Time (before the scenario actually occurs), so it does not affect the user experience.

This convenient tool allows you to import 3D scenes: models, textures, and bone animations. You can create a single library file that can be loaded by the 3D engine later.

However, we once encountered a problem and now we use webgl to handle it. Therefore, we have created a specific JavaScript layer, used a 3D library to compress 3D scene files, and translated them into the correct formats that webgl can understand.

Tutorial: be windy

A recurring topic in "finding the path to Oz" is wind. The main line of the story starts from weak to strong.

The first scene of the carnival was relatively calm. Through various scenarios, users gradually experience strong winds, and finally come to the final scenario, the storm.

Therefore, it is important to provide an immersive effect.

To achieve this, we fill in soft objects, such as tents and balloons, in three carnival scenarios.

(To be continued)

Translation: http://www.html5rocks.com/en/tutorials/casestudies/oz/

Reprinted Please note: from Jiang Yujie blog (http://blog.csdn.net/hfahe)