With these new ways to play H5, are you still worried about running out of inspiration?

Understand the new capabilities and gameplay brought by H5, read more cases, and read this article when planning activities. You will find inspiration, and then you will get a promotion and a raise, and reach the peak of your life...

HTML 5 first emerged at the end of 2014, became popular in 2015, and then settled in 2016. In 2017, H5 is still the first choice for brand social communication. Because it is a new technology, many planning friends often don’t know how to plan, or don’t know whether their wild ideas can be realized. So when planning, they consult technical personnel for every idea. If there are no technical personnel, they need suppliers to provide technical consulting services, but such a planning cycle is a bit painful. It’s still the same old saying, “A river flows far from its source, and a river with deep roots has lush leaves.” A good planner ( operator , designer, this varies in different companies and positions) must understand the new ways of playing since the release of HTML5 if he wants to come up with an excellent creative plan. This article is also suitable as a necessary reference document for everyone when planning H5 activities. You can take a look at it when you need inspiration.

After an in-depth analysis of 2,000 H5 cases, I concluded that there are four types of gameplay: sensor-based, touch screen-based, screen presentation-based, and content-based. The 4 categories can be further divided into smaller categories. In actual use, you can use only one type, or you can use multiple types together. It depends on your talent. Once you have the moves, there can be many variations in actual combat. The first three types are the basis, and this article will also expand on these three types, introducing the gameplay under each type. The content-based gameplay mainly includes mixed text and picture display content, quiz games and other gameplay that are strongly related to the content. In fact, they will also be more or less related to the other three categories.

Overall outline:

1. Sensor-based

2. Based on touch screen operation

3. Based on the screen presentation

1. Sensor-based

Readers can also jump directly to the part they are interested in. In addition, functions such as phone vibration, light sensor (detects ambient light intensity to decide whether to turn on the keyboard light and screen backlight), distance sensor (a phone with a distance sensor will have a black screen when we put the receiver to our face after making a call), etc., are not commonly used and will not be introduced in detail for now. Readers can find relevant information on their own.

The sensors on the mobile phone include gyroscope, GPS, camera, microphone, vibration sensor, light sensor, distance sensor, etc. Nowadays, the penetration rate of smartphones is very high, so you can design the gameplay with confidence, but you must pay attention to selecting relevant and appropriate sensors based on the business itself. Do not randomly match or stack multiple sensors to avoid adding unnecessary details. For example, if you are working on location-related issues, you would choose GPS, and if you are working on VR needs, you would choose a gyroscope.

Gyroscopes and gravity sensors are used more frequently in somatosensory H5, such as playing basketball, tennis, lifting dumbbells, controlling the rotation of windmills, checking whether the phone is lying flat/vertical, and converting panoramic images/ AR angles. Lifting dumbbells is a simple, direct and effective health-related H5 activity idea. Many people cannot tell the difference between a gyroscope and a gravity sensor. To put it simply, a gyroscope can track the movement of a phone in the XYZ three-dimensional space, while a gravity sensor is like this: you originally hold the phone vertically in your hand, and then you turn it 90 degrees and turn it sideways, and its interface will automatically react to your center of gravity. If you want to use your mobile phone to control the swing of the laser sword in Star Wars, you must use a gyroscope.

Case

(1) Try touching me?

The user shakes the phone vigorously to wake up the person who was sitting there, and then the dynamic picture pops up, making the person who was originally sitting there excited, running and surfing, and then jumping into the Buick Verano.

(2) Let’s have some patience

A small game that tests the user's patience. The user keeps holding the phone in the same position and the time is counted. Once the posture changes, the game ends.

(3) A “land” sprint, a speed challenge

The content is presented in two parts. The first half is unfolded in the form of a video. Click "ENGINE START" on the homepage to enter the video part, which introduces the plot of the Fast and Furious movie and Lufax into scenarios such as WeChat Moments and Toutiao . At the end of the video part, the game challenges and rules are given, and then the game session begins. The driver uses the left and right remote control of the phone to avoid obstacles during driving, and finally a ranking and lottery are conducted.

(4) The correct way to celebrate Mid-Autumn Festival

The case is based on the theme of the correct way to celebrate the Mid-Autumn Festival. Through the two states of "gathering" and "being alone", it reflects the different states of the Mid-Autumn Festival, which are also different states in life, and achieves resonance. When comparing, flipping the phone 180 degrees and switching states is very unique.

Location

Baidu Maps previously conducted an activity to find nearby McDonald's on the map by combining location with LBS services. It can also be combined with sports, such as recording the user's running track. However, H5 is not an APP. If it is closed, it cannot be detected. If you really want to detect the exercise track, it is recommended that the method of clocking in at the time would be more appropriate. The game can refer to the gameplay of Pokemon Go, where prizes are scattered near the user's location and the user walks to the destination to collect the rewards.

Case: Durex Catch Magpies

Click GO!!!!! to enter the game. The game is integrated with the map so you can see your location at any time on the map. If you find a little magpie, just walk towards it, circle it with the hoop, and click to capture. You can see the number of online game players and cute little magpies nearby at any time. You can redeem prizes by collecting a certain number of magpies! !

Face Recognition

Use human faces and H5 to interact. The gameplay includes guessing the age and emotion based on the face, testing the matching degree with celebrity faces, combining the face with game and movie characters (for movie promotion), changing the face into a child's appearance (generating a college entrance examination certificate), changing the face into an old appearance (this idea is suitable for the beauty and cosmetics industry), giving feedback based on the movements of the face (such as the mouth breathing fire and the eyes emitting lightning), etc. It is usually used in conjunction with AR and image synthesis technology. The relevant technologies are mainly face recognition and face motion capture technologies. Tencent provides Youtu recognition technology, and Microsoft also provides face recognition technology .

Examples:

(1) Tencent: My World of Warcraft I Star in

The H5 theme is to star in your own Warcraft. Choose your favorite poster style from the two posters, upload a photo of yourself showing your facial features, add scars, eyes and other decorations to the finished poster, and click Done to complete the poster production. You can generate the poster and share it on WeChat Moments.

(2) My primary school student ID photo

Click to upload your selfie to generate your own elementary school ID photo, and you can click "Change Gene" on the right side of the screen to generate ID photos with different styles. Highlights: Although the yellow background and the blue film produce a very strong color contrast, it does not give people an abrupt feeling. The photos synthesized by face recognition are restored very realistically.

(3) Snapchat's Gatorade drink is being used to power AR filters

Gatorade has launched an AR-based filter on Snapchat that allows fans to experience the excitement of being poured with Gatorade when they win a game. In terms of cooperation with advertisers, in the advertising of "Snoopy: The Peanuts Movie", Snoopy himself is very popular, and users are happy to "take photos" with him. He can also spit out candy with rainbow special effects from his mouth. The UGC communication effect is very good.

webRTC

WebRTC is a technology that supports real-time voice or video conversations in web browsers . It was acquired by Google in 2010 when it acquired Global IP Solutions for US$68.2 million. This shows how far-reaching Google's layout is. WebRTC provides video processing and audio processing technologies. Web developers do not need to pay attention to the digital signal processing process of multimedia. They only need to write simple JavaScript programs to implement it. Due to the limitation of hardware conditions, any ideas at present cannot be realized, let alone spread, but everyone can continue to pay attention and they will be available in the near future.

2. Based on touch screen operation

In addition to using sensors to create special gameplay, there are also many ways to operate on the touch screen, such as single-screen scrolling, gesture operation, panoramic interaction and multi-screen interaction. Operations on the touch screen should conform to the user's normal habits. For example, sliding the screen can turn pages or move scenes, and stretching two fingers apart means zooming in. Operation demonstration is provided by default, remember! Remember! In addition, the operable area should also be made larger to facilitate user operation. Do not imagine that the player is a professional player. This should be paid attention to during planning and testing.

Single screen scrolling

This is a very common form of interaction. When turning the screen, you can add some transition animations, such as fade-in and fade-out, to make the page turning effect vivid and not monotonous. You can also add gravity sensing to create a parallax effect when the phone is rotated. Single-screen scrolling has a wide range of application scenarios. Many homepages, product introductions, report summaries, and invitation letters use this form.

Examples:

(1) Invitation letter for the first anniversary celebration of in

Use colors to tell a story. After one swipe, the full screen will automatically switch. It is beautiful and has real voice messages. Finally, an invitation will be sent to invite you to participate in the one-year anniversary celebration.

(2) My S7 Road to Success

This is an H5 with pictures and texts. After the page is loaded, keep sliding the screen upwards to view the season title, number of stars obtained, battlefield glory, favorite hero, powerful partner, season pit, black CP, your own combat partner, and specific data analysis of Initial's King S7 season. Click the "View My King's Road" button at the end of the case to view your own King's Road. At the same time, this H5 case uses gravity sensing. When you shake the phone while experiencing it, the picture will shake as well.

Gesture Operation

In addition to clicking and sliding, we also use many gestures to interact with the screen, such as dragging, zooming, controlling, rotating, and drawing. Fruit cutting and Angry Birds are both very good examples of gesture operation.

Case: Your imagination is so wild, what can mooncakes be used for?

What can mooncakes be made into? When you open it, you will see a white bear and snow-skin mooncakes. Click and drag to place the snow-skin mooncakes on the white bear’s head to make ears (is your first reaction really ears? Hehehe). Go to the next step, put the mooncakes in a gift box to express your thoughts. There is also a creative index and a corresponding link to purchase the mooncakes.

3. Based on the screen presentation

This type of gameplay generally displays a cool and interesting visual content, such as video, animation, and special effects, to bring visual enjoyment to users. Users can also interact with the visual content and watch what they want to watch.

Video/animation display

This type of H5 will play a long but interesting and vivid video or animation to attract users' attention to its promotional content. The videos/animations are vivid, cool and interesting, and often feature celebrities. Users are generally not too resistant to such advertisements. Instead, they will like to like them and even actively share them with their friends. This gameplay is suitable for promotional scenarios such as products, festivals, games, movies, and scenarios with more narrative content.

The main ways to make this game are:

1. video. It is mainly achieved using AE, which can produce very cool effects, but the cost is relatively high, and is calculated by seconds in the industry.
2. Use canvas to make animations like the old flash. The effect is not as cool as the video, but this kind of animation can be watched and you can naturally add interactions during the playback. It is very difficult to write with native code. It is recommended to use createjs, egret, layabox and cocos engine tools .
3. Use H5+css3 to produce animations. This method can also produce animations like method 2, but the production difficulty and complexity are greater than method 2. However, due to the limitations of mobile phone hardware, this method is not recommended for the time being.

Examples:

(1) Xue Zhiqian ’s craziest advertisement in history

The homepage is a simulated interface of Xue Zhiqian's Weibo. After swiping a few times, the screen goes black. Xue Zhiqian appears on the screen and starts to talk about the reason and process of the director letting him endorse Tencent Animation. The content combines the two-dimensional world's favorite gay (two men together), flirty (because a chocolate boy is liked by all the girls in the school), funny (being retaliated by a paralyzed girl), and finally the sensational scene of him hugging an animated heroine and walking through thousands of mountains and rivers. It turns out that this is the official time to shoot the promotional poster. With a sound of action, Xue Zhiqian is frozen on the poster.

(2) The release of a drama shot in one take without any cuts

Follow the depth of your gaze and review those very popular dramas and variety shows in the colorful pictures. The light-hearted BGM, big names with distinct personalities, and dazzling screen stars are presented one by one in the picture. Tap the Youku icon at the bottom of the screen and the picture will change into a kaleidoscope. At the end of H5, the YOUKU membership promotion interface is presented.

(3) Rolls-Royce Black Badge as the Dark Knight

This is a currently non-mainstream flash type, provided to inspire everyone's ideas. This H5 case is presented in the form of flash plus text and image switching. The main color of black exists in the whole case with grandeur, nobility and beauty, combined with wonderful clips of many classic black aesthetic movies, which not only reflects the tribute to black aesthetics but also highlights that the new model Black Badge also incorporates the characteristics of black aesthetics.

Panoramic Interaction

Panoramic interaction refers to placing users in a 360-degree surround image/video environment for an immersive experience. Users can view content from different angles in this environment and interact by turning their phones or sliding the screen. If you divide the content into two screens, left and right, and put on VR glasses, you can have a VR experience. This gameplay is more suitable for scenarios such as virtual panoramic displays, immersive real-life displays or on-site event displays. Similar to this is the 360-degree display of products, where users can drag the products to see what they look like from different angles.

The relevant technologies are mainly 3D rotation operations and gyroscope technologies. Panoramic plug-ins include css3d-engine used by the Creation Festival, panoramic video components include Valiant360, and there are some paid components such as krpano.

Examples:

(1) Wu Yifan was involved in a hacker scandal, and his dressing room private information was leaked

Using Wu Yifan's involvement in the hacker scandal as an introduction, the program arouses users' curiosity and guides them to watch.

(2) Our iMusic

The entry page is a promotional poster, and brand-related messages are displayed in a scrolling prompt box. Click to enter the 3D scene. You can rotate the phone 360 ​​degrees for a panoramic view. Follow the scene prompts. Different music will play in 4 different scenes. Brand logos are set on many elements in the scene to achieve publicity and promotion. Click "View Details" to jump to the official Weibo.

Highlights: The 3D panoramic picture effect is bright and colorful, the 4 scenes have small interactions, and the details are very delicate. The characters are also drawn in great detail, and with the music played on click, the overall style is lively and vivid.

(3) KFC VR Virtual Charity Art Experience Hall

Enter the page and choose the way to experience the KFC Charity Art Virtual Experience Hall: 360-degree panoramic mode or VR eye mode. After entering the experience hall, click on the exhibition hall map on the ground to know that the experience hall is mainly divided into four areas: Experience Hall Hall, Charity Art Painting Exhibition, My WeChat Friends Hall, Charity Art Painting Exhibition. Click on the paintings in the exhibition to better appreciate them. Click the button in the lower right corner of the painting to learn more about the painting. Enter the WeChat Friends Room to see the avatars of friends you have shared.

Highlights: Both optional experience modes are very immersive. The experience hall makes people feel that it is right in front of them and very real. Li Yuchun is also the tour guide.

Multi-screen interaction

Multi-screen interaction refers to experiencing activities on multiple screens, and each operation will be reflected on other screens at the same time. Generally, dual-screen interaction is the main method. The gameplay includes multi-player cooperation or competition, you draw and I guess, question and answer, couple interaction, offline interaction with live audiences, watching videos on multiple screens together, etc. You can also use the mobile phone as a remote control handle and use the big screen for display. When making such activities, remember to pay attention to the scene. A large field with hundreds of people is different from a midfield with a dozen people and a small field with a few people. The planning is completely different. There is only one large screen. When there are more people, you have to consider the display issue. Either only display the results in real time, or only display the avatar for a moment (the main area depends on the action, such as a kill, a win, and nightclub screen domination is also a good reference). There is no need to worry about the basic display for a dozen or a few people, as all of them can be displayed. Next is the form. In fact, a lot of it can be borrowed from other physical games or existing games, such as Snake Wars. Xinbu Interactive is one of the earliest companies in China to try multi-screen interaction, and has done well in many cases.

The relevant technology mainly uses websocket or polling interface to perform synchronous communication and update the content of the screen. If the real-time online requirement is not high, websocket technology can be omitted. In actual production, we generally use node.js for the backend.

Examples:

(1) CF Mobile & Pringles team up to fight zombies

• Plot introduction: In the mobile game, you fight zombies and use high-energy "potato chips" as ammunition, and you are in urgent need of support ammunition;
• Select the mode - Single-player mode. Use your left hand to "aim" at the monster and your right hand to "throw" the grenade. Kill monsters within a limited time and score points. Whether you get the gift pack depends on your game results.
• Select mode - two-player mode. Character A selects "two-player mode" to generate a QR code. Character B scans the code to enter. Character A clicks "start". A fights monsters, just like single-player mode. B "reloads", that is, slides the "chips" upwards continuously and puts them into the package to provide ammunition for A.
• Based on your game performance (single/double), you can get a points package/download the CF mobile game.

Experience: "Two-handed operation by two people", although sometimes there will be some lag when the left hand "aiming", but the experience at the moment of "thunder explosion" is still quite cool! Although the experience of H5 mini games is somewhat different from that of native H5 mobile games, it is already a great example of H5 marketing .

(2) Chinese Valentine's Day "Mercedes-Benz"

With the theme of "Meeting at the Magpie Bridge", scan the QR code to enter the page, shake the phone, and the picture will begin to show. A Mercedes-Benz car passes through the bridge and arrives at the intersection of the red hearts. At the end of the picture, a red Mercedes-Benz car faces outside the screen and turns on its bright headlights.

(3) Love 9 and stay together

When you open the case, you will see a picture of love that never stops and love that stays together. Clicking on the picture will lead to the next page. Clicking on the icon will allow you to choose one of the two genders. However, the content of the video will be different when you click on different genders. After clicking, you will enter the next page. On this page, you can choose single screen or dual screen. Click dual screen to scan the code to invite your other person to watch the movie with you. Click single screen to enter a watchable video.

(4) WeChat offline multiplayer airplane game

The WeChat Cashless Day event provided an airplane game that multiple people can play at the same time. Visitors use their mobile phones to operate the planes to shoot, and when they reach a certain score they can exchange it for gifts. The game screen played by multiple people will be displayed on the big screen. This approach enhances the interaction between organizers and tourists, and also reduces the waiting time for tourists. The design of the airplane game also reminds people that the first WeChat game was the airplane game, giving people a feeling of returning to the original intention.

(5) Xinbu Interactive Basketball Shooting Game

Use your mobile phone to control the direction and speed of the basketball, aim at the basket and shoot. In the last 15 seconds, the basket will move, increasing the difficulty of the game. The game can also be linked to the official account , which is a typical offline fan-attracting tool.

Image cropping and deformation

The clip-path method of css and the clipPath method of svg can clip graphics or images into custom shapes such as triangles and pentagons. Using this capability, we can make images fit together or apart like pieces, or dynamically combine polygons into various shapes like a jigsaw puzzle, or naturally transform one icon into another in the form of animation. This gameplay is suitable for cool display and switching of pictures and projects with transformation requirements like Transformers. Currently, mobile phones with average performance do not run this effect smoothly.

Summarize

H5 will be the mainstream form of the web in the next ten years. Now many APPs, VR, AR and H5 have connections. For marketing , H5 is the best choice for rich media advertising on mobile terminals. Understand the new capabilities and gameplay brought by H5, read more cases, and read this article when planning activities. You will find inspiration, and then you will get a promotion and a raise, and reach the peak of your life...