Research on the Design of Interactive Games of Intangible Cultural Heritage Based on HTML5

Abstract

In the context of digitalization, it is particularly effective to export and disseminate cultural content in the way of game interaction. In particular, the emergence of HTML5 new communication carrier is favored by the digital display and dissemination of intangible cultural heritage in a more lightweight way and accepted easily by users. It can not only show difficult and old content, but also add interest and audio-visual interaction through small games. This chapter discusses this topic. Firstly, this chapter analyzes the interactive characteristics of the current functional intangible cultural heritage games applet based on HTML5,and summarizes its technical characteristics. Secondly, it makes a case analysis about the interactive framework of intangible cultural heritage games based on HTML5. Finally, it refines and summarizes the main art design process of HTML5. The chapter is committed to giving full play to the advantages of HTML5-based large user base, convenient communication, and open operation mode, so as to meet the users’ experience of intangible cultural heritage and game interactive experience, so as to promote the inheritance of intangible cultural heritage.

1. Introduction

All nations and countries have intangible cultural heritage in various forms, which is an exact manifestation of diverse human civilization. In the context of global integration, many intangible cultural heritages are facing many common difficulties in inheritance and development. Network communication is an important way for the popularization and diffusion of intangible cultural heritage, among which HTML5 has become a common style in the digital communication of intangible cultural heritage due to its portability, compatibility, multimedia, and other characteristics [1]. This chapter focuses on the applet of HTML5 and the design practice of China’s intangible cultural heritage as the main research theme, hoping to provide a preliminary view for the interactive design of intangible cultural heritage based on HTML5 from the perspectives of type, case, and design process.

2. Basic research of HTML5

2.1 Basic overview of HTML5

HTML5, the fifth-generation hypertext markup language, is the most widely used language on the Internet. HTML5 technology has great advantages in supporting the display of various dynamic effects such as image, sound, video, and animation, which, therefore, is widely used in modern Internet advertising and is referred to as “HTML5” by Chinese people. With the popularity of instant messaging in the recent years, the function of browser has been integrated into WeChat, microblog, and other apps, so that HTML5 pages spread by such terminals can be directly browsed and involved by code scanning. The huge number of users and social attributes provide a convenient platform for the dissemination of HTML5 pages.

From the technical point of view, HTML5 is characterized by easy search, local storage, compatibility, connectivity, multimedia features, etc. It holds more prominent multimedia features than HTML4, shifting the dominance of flash and integrating process audio and video functions to facilitate audio and video processing in the network. Moreover, HTML5 is more effective in 3D effect rendering, which provides technical possibilities for further virtual reality applications.

At present, common HTML5 performance types are Visual, Audio, and Games. Among them, interaction, which integrates visual presentation and interactive behavior, is the most popular, and this kind of HTML5 has a higher focus on user experience. The addition of interaction technology enables users to participate in HTML5, not just passively and simply accept information [2]. The user interaction under the guidance of HTML5 audio-visual promotes the development of them, arousing their emotional resonance and making users willing to forward and share, thus further improving the dissemination scope and effect of HTML5 content.

HTML5 is widely used in information dissemination and brand marketing due to its various characteristics such as short cycle, low investment cost, convenience, easy dissemination, strong interactivity, time-consuming fragmentation, and strong interest. Therefore, HTML5 technology, a representative of new media technology, is combined with intangible cultural heritage, and with the support of multisensory design in vision, hearing, and touch, it contributes to the visualization and active inheritance of intangible cultural heritage culture, gives users a comprehensive experience for cognition, and makes cultural exchange more possible.

2.2 Significance of integrating HTML5 with cultural heritage communication

Intangible cultural heritage is produced in a specific environment and culture. The emergence of digitization provides a new idea for the protection of national cultural heritage. In the past, intangible cultural heritage was widely spread among the elderly in the community. With the development of the Internet, an increasing number of new things have emerged on the Internet. A variety of network resources and foreign cultures attract young netizens and occupy their daily life, resulting in their lack of understanding and interest in their own traditional culture [3]. Therefore, to make the ancient intangible cultural heritage younger and be accepted, recognized, and loved by the public, it is of great importance to cultivate cultural confidence.

The development of new media technology has brought a number of new media, and the change of media has changed the way people understand the world. In the context of mobile Internet, the demand of network audience shifts from active acceptance to participation, from desire to become the disseminator of information to the disseminator of information and from superficial participation to deep participation. Their demand for participation is the driving force for the development of communication technology [1].

In the context of digital media, intangible cultural heritage can be spread in more interesting and diverse forms, especially by using HTML5 technology. Various forms such as animation, interaction, and games can be interspersed in the page, attracting young people to learn about intangible cultural heritage. The increased interactivity reduces the distance between culture and people, which allows users to experience intangible cultural heritage from inside to outside in the new media era from a new perspective, feels the spiritual power contained in intangible cultural heritage, and has a sense of identity with the value behind intangible culture, thereby making intangible cultural heritage more accessible to the younger generation. At the same time, with the help of HTML5 pages of WeChat, microblog, and other terminals, cultural heritage can be rapidly loaded and disseminated online, and its communication scope and channel be effectively improved. The interactivity of HTML5 technology not only makes two-way communication between input and output possible, but also achieves the twice in communication effect with half the effort.

3. Case study on the combination of HTML5 and cultural heritage

3.1 HTML5 visual interactive work “digital provider”

HTML5 “the king’s glory x digital provider program” was jointly launched by Tencent and Dunhuang Research Institute to spread Dunhuang culture and advocate the protection of Dunhuang murals. It has excellent performance in visual design, music and sound effects, interaction, and user experience (Figure 1). HTML5 focuses on the disappearing colorful Dunhuang murals that are fading their brilliant colors. The video is slowly unfolded in words, and with the animation of broken and peeling rock walls, it pulls users into the space and time of Dunhuang. Users come to mural selection interface, and then browse and enjoy 10 Dunhuang murals by sliding the screen horizontally, and then re-color and re-produce one of their favorite murals that have lost their color into the most beautiful Dunhuang in everyone’s heart. They may enter their names to generate your own Dunhuang murals after painting and then freely choose to share or donate money for Dunhuang murals, becoming a digital provider and contributing to the protection of murals (Figure 2).

Figure 1.

Digital provider interactive interface 1.

Figure 2.

Digital provider interactive interface 2.

This kind of HTML5 focuses on feeling the charm of culture in the viewing process by satisfying users’ audio-visual experience. The key to the success of this case is the appropriate connection between the expression form of creativity and emotion. The first is creativity. By clicking on the interactive form of color for the lost murals, users can achieve a sense of creative achievement in this process and personally feel the beauty of Dunhuang murals. In terms of expression form, the entire HTML5 adopts slow pace and simple tone. The visual design perfectly fits the gravel texture of Dunhuang murals and the traditional color matching of murals, enabling users to have an immersive experience. Secondly, sound and picture are combined in the program. In terms of design, bells and flutes in line with the theme tone are used, which greatly enhances the authenticity and beauty of HTML5 and generates the resonance between users and the disappearing Dunhuang murals.

3.2 Audio HTML5: Quyi

This kind of HTML5 applet mostly outputs and transmits the content in the form of loading video and audio. Quyi is an important category of intangible cultural heritage [4]. The Organizing Committee launched mobile terminal HTML5 in the 2020 national intangible cultural heritage Quyi week, intending to further publicize and popularize Quyi-related knowledge, enhance the visibility of Quyi intangible cultural heritage, and promote its inheritance and development [5].

The background sound Pipa performance “ugly end and Yin beginning” is always accompanied with the opening of the applet. The animation is loaded, and the representative string Pipa patterns and cloud patterns are selected. After entering the main interface, there will be a male and female dulcimer and erhu performance scene. The HTML5 program will spread the folk art knowledge to the public in the form of question and answer. Many knowledge points are assessed by loading audio for the purpose of interactive assessment with the audience. The answer results of all the questions will be presented in the form of different interface sounds, and correct answers and relevant expanded knowledge will be displayed on the screen for knowledge assessment and publicity, achieving the original intention of HTML5 production. In the loading process of specific audio, we should pay attention to intercepting the most representative part of the audio, so that the audience can quickly grasp the key points of audio in the shortest time and make rapid and accurate judgment on specific knowledge points such as musical instruments, playing places, and Quyi categories. At the same time, the audio should also be as realistic as possible to achieve auditory pleasure.

Similar video loading can also be seen in the publicity of intangible cultural heritage activities such as HTML5 Tai Chi and Sending a king ship. This kind of audio loading needs to intercept the activity as part of the essence in a short time, so as to more accurately convey the main characteristics of intangible cultural heritage to the audience.

3.3 HTML5 interactive games: Qwaken the “sense of ceremony” of the spring festival

Leading game companies, represented by Tencent, Netease, and Panax notoginseng mutual entertainment, start from small games and display Chinese traditional culture by combining games and culture. With custom display as the theme, Wake up the “sense of ceremony” HTML5 produced by Sanqi mutual entertainment company adds interactive links to allow players to complete multiple spring festival customs through their own actions (Figure 3). Take pasting Spring Festival couplets as an example, players need to select words and fill in the blanks to pull the correct words into the couplet. When these blanks are all filled, the blessing words of the gate will be reversed, and the gate will be opened, which implies “happiness.”

Figure 3.

Spring Festival H5 game interactive art interface.

The scene connection is embedded with intangible cultural heritage elements to make the interface transformation more smooth and ingenious such as setting off firecrackers and lion dance. The lion will appear after the firecracker burst effect. The red happy lion jumps out from the far right of the picture. You may click to accumulate strength, and the lion can jump up the plum blossom pile one by one, and pull down the hydrangea at the top, so as to pop up the blessing of good luck. The cheerful New Year music and pictures with red as the main tone not only restore the most Chinese New Year flavor, but also incisively and vividly express the sense of ceremony that the whole HTML5 wants to convey.

Similar interactions can also be seen in the publicity of movable-type printing. Wood movable-type printing is one of the main forms of movable-type printing in ancient China after movable-type printing invented by Bi Sheng in the Northern Song Dynasty. At present, it is mainly distributed in Ruian City, Zhejiang Province, but rooted in Chinese clan concepts and a thriving local genealogical culture. It is mainly used for genealogy printing, with strict consistency with ancients skills and very exquisite process. In addition to the preparatory work of genealogy opening, audit, and grading in the early stage, its processes include font making, word picking, typesetting, printing, post-production and online binding, which retains both the traditional process of Chinese movable-type printing and the characteristics of thread bound books.

In order to further publicize and popularize Chinese movable-type printing, improve the visibility of ancient printing techniques, and promote their inheritance and development, the Intangible Cultural Heritage Research Institute launched the HTML5 special page on the mobile terminal of “fun to play wooden movable type and send blessings in the new year.” HTML5 small game adopts the wooden movable-type font library provided by Dongyuan village, Ruian City. By clicking on the nine-palace grid to extract blessings, users can select words independently and personally experience wooden movable-type printing technology. Users can also enjoy the simple and solemn charm of the old song style in the processes of writing, engraving, picking up, typesetting, and printing. The HTML5 theme makes it possible to enjoy the micro-video of wood movable-type printing taken in Dongyuan village [6].

4. Art design process of intangible cultural heritage applet based on HTML5 technology

4.1 Clarify the design purpose and theme

Firstly, whether HTML5 design communication of intangible cultural heritage is conducted for the purposes of science and education, brand publicity, drainage, or promotion are determined. Tencent’s “visit you through the Forbidden City” produced an ancient costume rap HTML5 with the characteristics of ridicule and crossing. The orientation of making traditional culture live, as well as the art style and narrative mode of the whole HTML5, has taken into account the initial appeal. In such a young, popular, and entertaining way, it targets at college students and aims to arouse their attention to traditional culture.

Before design, we should first read a large number of documents, watch documentaries, and conduct necessary field investigations according to the target theme. Intangible cultural heritage activities are mostly a cultural form created based on thousands of years of social production, life practice, and cultural exchange. Behind the complex and elaborate production process of many kinds of intangible cultural heritage is the portrayal of regional culture and human spirit. Therefore, in addition to the essence of production skills, basic knowledge, and performance activities, intangible cultural heritage HTML5 projects should also take into account the multidimensional influence of regional culture and customs, which should be jointly reflected in the design positioning of HTML5.

The innovation of communication forms relies on cultural carriers. The local storage, compatibility, and multimedia features in HTML5 technology can express the living face of intangible culture through various forms of media such as audio, video, and interactive games. Interaction design helps intangible cultural heritage categories convey cultural images, so as to deepen the impression of the audience and improve the communication effect.

4.2 Work conception and determination of artistic style

After the investigation and analysis of environment and theme, we can further determine the final form of HTML5: In terms of form, it can be roughly divided into visual, audio, interactive, game, and other categories. In terms of performance style, it can be divided into real shooting, dynamic illustration, long picture, audio, etc., according to performance object. There are many ways to narrate the script of HTML5, which can be roughly divided into event narration, emotion narration, function narration, science and education narration, game narration, and other different types. The choice and determination of form should be coordinated with technology, art, and copywriting to identify the most appropriate expression method.

After the basic style is determined, the HTML5 project is considered as a whole and the basic framework is drawn up. Generally, it is necessary to introduce the historical origin, production technology, and formal expression of intangible cultural heritage. In addition to the background introduction by using pictures and narration, production technology and display process can be the main content of HTML5. Each scene represents one step. Considering cultural differences and other factors, many users may be exposed to intangible cultural heritage for the first time and lack basic cognition and understanding, making them feel obscure when watching HTML5 and not knowing what to show, and thus affecting the communication effect. Therefore, the design of copywriting and narration is very important in the planning of HTML5. Each scene is equipped with a simple and general narration, which can not only help users understand, but also makes the connection between scenes more coherent, and then improves user experience.

When the whole planning and creativity are focused on special festivals, new forms for festival characteristics can be developed to enrich HTML5. Many intangible cultural heritage HTML5 are executed by shooting video and special effect synthesis. In the design process, appropriate forms of expression should be selected to highlight the content to the greatest extent. When the form is determined, the prototype drawing shall be designed at the same time, which is similar to the mirror splitting script, and can also be understood as the preliminary sketch.

4.3 Visual design

It is necessary to determine art style in the stage of specific design. The designer needs to judge what kind of expression form to use, what tonality to need, what elements to match, and how to match the music and dynamic effect, which requires strong control ability.

Intangible cultural heritage has certain popular science characteristics in the process of reproduction and dissemination. Therefore, from the perspective of visual design, it follows certain objective practical laws. If it has a certain narrative or plot, we need to find the corresponding reference to design the picture, conform to the theme in tonality and content, and find the appropriate soundtrack and sound effect.

In the HTML5 small program of Tibetan medicine mud mask, the author selects the colors with strong contrast and visual expression. In addition, some Tibetan elements are also used in the picture, such as Scripture barrel and prayer flags, which add distinctive regional characteristics to the picture (Figure 4). From understanding the small medicine mud mask to understanding the breadth and depth of Tibetan culture, this HTML5 is not only a way to promote a Tibetan skill, but also an opportunity to popularize Tibetan culture [7]. At the same time, these elements can also help the scene to be more coherent and smooth.

Figure 4.

Illustration design of Tibetan cultural elements, by Ziyi Kong.

In terms of color matching, as the main content follows the traditional bright and exaggerated color matching of Tibetan style (Figure 5), in order to highlight the main body, distinguishes primary and secondary, and avoids the adverse experience of visual fatigue caused by watching high saturation colors for a long time, the author selects dark colors such as black, Tibetan blue, and red brown as the background color of HTML5, and appropriately uses materials such as gold thread to outline points and lines to enrich the composition of the picture, and prevent the background from being too monotonous and dull, so as to improve the texture of the whole HTML5.

Figure 5.

Creative illustration performance of medicine mud mask, by Ziyi Kong.

4.4 Specific interaction or play design

In specific links, users can set levels or playing methods [8]. Generally, its type can be divided into customs clearance, award, selection, sharing, etc. The settings of activity name, activity time, and number of participants can be made in the basic settings of small games. The first, second, and third prizes can be set in the award setting. The awards include gifts and coupons. It is particularly suitable for both online and offline activities. The cashing address can also be set for offline activities. Points can be drawn. Award setting, such as product score and winning probability, can be set.

In the winning setting link, in addition to setting the basic lucky draw limit and winning rate, advanced settings assisted by friends are also added. Only after successful sharing and invitation can users get an additional chance of lucky draw, making it easier to achieve activity fission.

In the sharing setting link, in addition to the QR code and links, users can also set up near open screen advertisements and brand advertisements, add pictures and external links, click to view the example effect, and display only the preview on the WeChat. Taking the game “Dragon Boat Race” as an example, users click the left and right buttons in turn to move the dragon boat forward. If they click the wrong button, the dragon boat will not move. The game time is 30 seconds. When the time is up, “time is up” will pop up and the game results will be displayed. Through lottery and interaction, users can finally set up sharing and invite more users.

4.5 Dynamic effect design

With the development of digital media technology, people are no longer satisfied with the visual impact brought by static pictures. The addition of dynamic effect can add interest to HTML5 and improve the overall viewing experience of users. HTML5 project needs a certain time to load materials. Therefore, expressive or transitional pages can be set on the loading page, which can not only attract users’ attention and help them alleviate the boredom and anxiety caused by waiting, but also quickly and intuitively help users make their first impression of non-heritage categories, mobilize users’ curiosity, and lay a foundation for the development of later contents. The dynamic effect of the design mostly serves the whole, highlights the focus of the picture, and makes the picture more vivid and HTML5 more expressive.

In addition, the dynamic effect of shaking of small elements in some scenes can be designed to add interest. There should be a proper number of dynamic effects. Too many dynamic effects will make the screen lack focus and dazzle users. And dynamic effect should not be independent of the picture, but should consider the whole and maintain the overall rhythm of HTML5.

4.6 Sound effect design

The design and creation of HTML5 works mainly focus on vision, hearing, and touch, among which vision and hearing are the easiest to achieve the effect and give feedback of digital screen. However, sound effect design is often ignored in HTML5 creation. The sound effect of HTML5 mainly includes background and auxiliary sound effects. Background sound effect is an important means to lay the emotional tone of the whole HTML5 and create an atmosphere. It needs to be targeted at the theme following the principle of audio-visual consistency. Auxiliary sound effect is a detailed design added according to the needs of the content, which plays a role in setting off the description of the content and can bring users an all-round audio-visual experience.

To sum up, it is necessary to combine the design object and theme, and appropriate rhythm and melody in the sound effect design of HTML5. In terms of auxiliary sound effect, in addition to adding key sound effects in line with tonality, we can also add narration to expand the knowledge of intangible cultural heritage beyond the scene, including the history of specific intangible cultural heritage activities and the spiritual and embodied cultural connotation, which enables users to feel the appeal brought by music and enjoy a more immersive experience when appreciating the exquisite and simple cultural heritage.

4.7 Integration and realization

HTML5 integration can be specifically achieved in two ways. One is by code. The prepared layered map, including PSD file, PNG cut, appropriate file, MP3 audio, and video file, is packaged to the front-end engineer. The engineer places these contents on the server and combines the elements into HTML5 web page by code editing. After the code editing is completed and tested, the whole HTML5 web page will be pushed to the Internet. The other is codeless implementation. At present, there are a large number of HTML5 page generation tools on the Internet, most of which appear in the form of Web sites, and are named as third-party platforms, which provide assistance for designers without front-end resources. The designed materials can be uploaded to the server of the third-party platform for editing and publishing. The disadvantage of such platform includes single function and limited effect, while the HTML5 page generated by engineers can be customized.

5. Follow-up work

In terms of publicity channels, WeChat official account and short video can be combined online to improve the initiative and convenience of users’ browsing. In addition, the jump feature of HTML5 allows users to not only browse the intangible cultural information of the current HTML5 page, but also jump to other pages according to the prompts, so as to learn more relevant information [9]. Therefore, online and offline links can also be adopted to cooperate with local museums to develop relevant cultural and creative products and build local cultural brands. And small e-commerce programs can be connected to broaden product sales channels, and promote regional economic development to a certain extent.

At present, trendy cards and trendy toys are deeply loved by young people. Cross-border cooperation and joint branding between intangible cultural heritage culture and such fields is an effective means to quickly promote ancient culture among young groups, and the form of HTML5 is also very consistent with the “trendy” concept of these brands. It can be used as a means of publicity to promote goods and make the consumption behavior of the audience accompanied by cultural communication.