Development story behind Cut The Rope HTML 5

Note:Cut the RopeIt is a small game that people love. A Development Team transformed it into the HTML5 version. Want to see their experiences in the transformation process? Let's take a look at the following articles written by developers themselves ~

Inspiration

Cut the RopeIt is a small game that people love. So we came up with an idea to use HTML5 to put the game online so that more people can access it.

To achieve this, Microsoft's IE team andZeptoLabTeam (game developers) andPixel LabExperts can work togetherCut the Rope. The final effect should be able to translate the game into an online version without distortion, and display the powerful functions of HTML5: canvas provides plotting, browser-based audio and video, CSS3 style, and WOFF font personality.

If you want to playCut the RopeFor the HTML5 version, go to the URL below:Www. cuttherope. ie.

We think the HTML5 game makes the network more interesting. It also shows the strengths of the previous version of IE because it supports open standards. Therefore, we want to share some developmentCut the RopeTechnical details in the process to help you build your own HTML5 site and ultimatelyWindows 8 StorePrepare!

Run in IE9 as an HTML5 application and rewrite it from the original iOS source code.

SlaveObjective-CToJavaScript

InCut the RopeWhen applied to a new platform, we hope that we can retain the unique physical features, movements, and styles of the game. Therefore, at the beginning, we wanted to rewrite the iOS version (rather than rewrite it ). We carefully analyzed the original version written in Objective-C, and found that the volume is large and complex. The iOS version contains about 15,000 lines of code (excluding libraries !) The most complex part of the code is the action, animation, and drawing engine. They are very complicated. What makes things more complicated is that these three parts have a high Coupling Degree and have undergone a lot of optimization.

This is a daunting task: to implement the Code on a browser without losing its unique personality and high quality. To do this, we bet on Javascript.

In the past, Javascript has always been seen as a very slow language. Frankly speaking, this was true at the beginning. The old Javascript Engine is designed to handle simple scripting tasks (as shown in its name ). However, the Javascript engine has been greatly optimized. After just-in-time and other functions are integrated, the Javascript execution speed can be close to the underlying code execution speed.

In addition, we know that Javascript programming is different from -- and the way of thinking is different from -- programming in compiled languages. When we rewrite this game from Objective-C, we know that we should make full use of the differences and advantages of Javascript programming.

An obvious example is the lack of structs in Javascript. Structs is a lightweight aggregation of related attributes. It is easy to use Javascript objects to aggregate a series of attributes, but this is very different from using a suitable struct. The first difference is that once structs is assigned to a variable or is passed to a function, it will be copied. Therefore, a function written in a compiled language such as Objective-C can modify the struct value passed in the form of parameters without changing the value in the original called function. Even in the same function, assigning a different value to struct copies the value. Javascript objects are passed through references. So when a function modifies an object parameter, the original function can also see this change.

A simple way to imitate structs is to create a copy object whenever a Javascript Object is used as a value assignment object or an object passed by parameters. In native languages, the cost of using structs is very small. However, creating an object in Javascript is very expensive. Therefore, we must be very careful to reduce the number of object creation times. Especially when assigning values, we try to copy a single attribute as much as possible, instead of creating an entire object entity.

Another example is the nature of Objective-C code library object-oriented. Unlike traditional Object-based inheritance, JavaScript provides Prototype property-based inheritance. This is a highly simplified form of Object-based inheritance, and is not compatible with traditional object-oriented languages such as Objective-C. Fortunately, there are various class libraries that can help you write Object-Oriented Programming (OOP)-style JavaScript code, the class library we use is very simple written by John Ressig. (It should be noted that ECMAScript5, the latest JavaScript specification, also provides support for some classes, but we choose not to use it, because we are not familiar with the language of this version, and our development progress is very tight ).

In addition to converting code from Objective-C to Javascript, we also need to change the image code from OpenGL to the Canvas API of HTML5. In general, everything went smoothly. Canvas is a fast rendering surface, especially in a browser (such as IE9) where an API is accelerated by hardware ).

An example of how to draw a rope using aliased lines completed by using the canvas API.

Surprisingly, we have encountered several times where Canvas provides more functionality than OpenGL ES used in the mobile Cut the Rope version. An example isAnti-alias lines. When using OpenGL to draw anti-aliased lines, you need to embed a line into a triangle and fade the turbid part of the end to make it transparent. In HTML5 canvas, anti-aliasing lines are automatically drawn by the line API. This means that we actually need to remove some code from the OpenGL version. Removing the triangle vertex array in OpenGL code can provide better performance.

In the end, we have almost 15,000 lines of code executed in the browser (it has been minimized, So if you view the source code in the browser, you will see much less code ). Considering the complexity of so many codes, Denis Morozov (Director of ZeptoLab Development, the ctor of Development at ZeptoLab) asked a question at the beginning: can HTML5 provide us with the required speed and performance?

To answer this question, we created an early "performance" milestone where we focused on getting the smallest version of the most difficult part of the game runtime. That is to say, we want to see what the rope looks like and whether we can handle complex physical engines in a browser.

PerformancePerformance

Three weeks after the project began, we finally had the basic components of the physical and drawing engine, and a simple timer for starting the animation. Now we can present some ropes, a star, and an Om Nom sprite in the game scene. Great progress! In Week 4, we added some basic interaction with the mouse so that we could really start playing the game. We have been testing performance during the development process, and we hope the ZeptoLab team can give us some feedback.

When we shared the Code with ZeptoLab, they were pleasantly surprised by the performance of the Code in the browser (especially the speed and smoothness of the game ). To tell the truth, we have been holding a breath all the time. We want Javascript to be faster, because physical computing is complex and requires real-time processing. This is a good example, proving that the idea that Javascript is slow in the past is actually wrong. The latest Javascript Engine is very fast.

In this project, We previewed the game in IE9. When you load the game, the Chakra JavaScript Engine of IE9 pre-compiles the code in a background thread, just like a compiler compiling Objective-C or C ++. Then, it sends the compiled code (bytecode) to the game thread for execution in real time. The execution speed is almost the same as the local execution speed. Surprisingly, this performance comes from the Javascript engine, and we don't need to do any special processing in the code.

Early Frame Rate Detection results of the project (note that the maximum frame rate is 60FPS)

We made a bet on Javascript, so we turned our attention to hardware and browsers. Because of the hardware acceleration stack of IE andDisney TronWith the experience accumulated on some HTML5 sites, we don't have to worry about the perfect performance of games on testing machines. We can easily reach the upper limit of 60 FPS (frame/second ). However, we want to make sure that the game works well on other hardware and other browsers. The following figure shows the results after some preliminary tests.

Based on the test data, we set 30 FPS (frame/second) to the minimum threshold. When the browser speed is lower than this threshold, we will notify the user. They can still play the game, but we will inform them that they may feel a little slow in the game. This ensures that the game supports different hardware and software and provides players with the best experience we can provide.

We want to point out two things. The first thing is that the current version of the game has the best time to play with the mouse on the desktop PC and Mac. We have not added support for touch screen input, but we will consider this in future versions.

Second, the existing Chrome version (version 16) has some problems related to media playback that have been known to everyone, making the sound in Cut the Rope erratic. We conducted in-depth research and tried to recode media files in different formats (including WebM), but did not find a suitable format or MIME configuration or any other solution to solve this problem effectively. This seems to be a problem with the browser's bugs and is already known to everyone. More importantly, the game is very interesting despite the intermittent sound interruption. With this in mind, we can say that IE9 users can get a great application for free, and Chrome and some Firefox users may encounter sound problems, but they will notice that we use a flash plug-in to ensure that sound effects and music work normally.

Tools

A good thing about HTML5 is that you don't need to learn a new language to use the powerful features of this new technology. If you know and understand Javascript, You can implement all the functions that a modern browser can achieve. You can even create a game of your own like this game!

Code Editor and development environment

Visual Web Developer 2010 Express can be downloaded and used for free. It is a great editor, even for experienced Web developers. Analyzer. The figure shows the time spent in the calc2pointbezr function (the calc2pointbezr function is used to calculate the position of each segment of the rope ).

There are some good free tools that make it easier for us to use Javascript and HTML5. Most of our development work is completed in Visual Web Developer 2010 ("quick" version can be obtained for free here. This is a very robust Web editor with Automatic completion of Javascript and CSS. The better thing is: it is free! We have completed most of our tests on IE9 in Windows 7, and we are also an early adopters of Firefox, Chrome, Safari, and IE10. In general, mainstream browsers provide consistent implementations for the HTML5 features we use. In most cases, the features we tested on IE9 run as well elsewhere.

Check our resource loaders (Resource Loader)!

Cut the Rope has a very unique detailed visual style-there are a lot of pictures, audio and video, and the cost is very small. The final result is that this game is much larger than a general website. In summary, it is about 6 MB (the average website is 200-300 K ). It takes some time for these multimedia resources to be downloaded. if the resources are not downloaded in place, we cannot see the content on the webpage and we cannot start the game. In a typical web page, if one or two images are missing, they can still run, but in the HTML5 API (drawImage), if the image cannot be obtained, this API will crash.

To solve this problem, we want to create a resource loader to download all the content required by the page, and give us a good feedback after the download is complete. This little code can do a lot of great things:

1. It shields different browsers from processing downloads and the way they tell you the progress.

2. It allows you to determine the order in which things are downloaded (You may want to download large files first, or you want to download all menu images before downloading game graphics ).

3. In the end, it can intelligently remind you of the arrival of things, so that you can notify the user of the progress, or even start some games.

It is difficult to create these types of databases. We are very satisfied with the effects of these libraries, so we want to share the code of our resource Loader with you. The final result is PxLoader, a Javascript resource loader library. You can use it to create a preloader for HTML5 applications, games, and sites. It is open-source and free. You can capture it from the top of the page, or click here.

IEPerformance Tools in

Another indispensable tool in the development process is the Javascript analyzer (JavaScript Profiler) in IE9 ). Analyzer allows you to discover hot spots and bottlenecks in your code. During our first performance evaluation, we found that on some machines we were stuck at 20 or 30 frames per second, which almost gave up.

We did some initial code check, but nothing was checked out. We loaded the game using analyzer and found that we spent too much time on the satisfyConstraints () function. This function is used to calculate physical numbers related to ropes. The Objective-C implementation we use to rewrite is implemented by recursion. Each layer of recursion deepens, a new object will be passed.

With some guidance from Microsoft, we decided to replace the recursive function with an "undo" loop version. The results are amazing. We have seen 10 times or more performance improvement in each browser. Frankly speaking, without the IE9 analyzer tool, we will never find this point.

What is next?

Microsoft presented a Windows 8 developer early adopters in September. After this declaration, HTML5 will be more interesting, because Metro-style applications can use several development toolsets for development, including HTML5. This means that Web developers can easily migrate the code written for the Web to windows8. In the future, investment in online applications can be rewarded in Windows Store.

In fact, as long as we do a little more work, we can port the HTML5 application to the Metro style application of Windows 8. You can read aboutCut the RopeAnd content integrated into Windows Store.

We are very happy to see apps built using HTML5. You can download IE9 andWww.beautyoftheweb.comFind some other pretty sites, orDev.windows.comDownload the developer's early adopters version of Windows 8.

Keep an eye on it because it's just the beginning ...... There will be more surprises!

Link to the original article: development story behind cut the rope HTML 5