Hype software is an HTML5 production software on Mac system. In this software, it is remarkable that its powerful physics engine function and animation production function. As a professional programmer, it is necessary to make a web page with physical quantity. Games, let alone non-professional programmers, will take a lot of effort, but these problems can be solved by using Hype.
Below, the editor will use the Hype 4 version to demonstrate how to quickly and easily make a web game with elemental gravity physical quantities. From this tutorial, I believe everyone can feel the power and charm of Hype.
1. Game screen display
Before starting the tutorial, please take a look at the final web game effect preview GIF with the editor to get a general understanding of the effect to be done.
Figure 1: GIF preview of web game effect
The gameplay is: click on the "reset" text at the top, and a round ball will appear. The ball has gravity and elasticity and will fall naturally. It will bounce when it hits a wall or a lever. Players can click on the L square on the left or the L square on the right. R box, bounce the ball, once the ball falls from the middle, it is considered a failure.
After understanding the gameplay, for this gameplay, you need to deploy the corresponding static scene, and then use Hype's physics engine to apply various physical quantities to the ball, and then make some dynamic effects, such as color gradients, button click events, etc., just This little game can be realized, please follow the editor to start the deployment of the scene.
Two, page production
The first step : The game is more intended to be used for leisure on mobile phones, so from the GIF preview in the picture above, it can be seen that the scene is not big. Therefore, choose to create a new scene on the left side of the Hype interface, and then click " In the "Scene Inspector", set the size of the scene to "320px * 568px", and then fill in the background color of the scene. The color is comfortable for everyone. The background color code of the editor is set to "#5C131F", as shown in Figure 2.
Figure 2: Setting the scene size and color
Step 2 : Click the "Element" button, select the rectangle, create four rectangles, and then use the mouse to adjust the size and position of the rectangle, so that the size and position of the rectangle are shown in the red box in Figure 3 below.
Maybe someone here has doubts? Why add these 4 rectangles outside the scene? Is it a bit redundant? Anyway, you can't see the rectangle outside the scene. Why do you add them? Actually not. Although these 4 rectangles cannot be seen outside the scene, their main function is to act as walls and provide elasticity for the ball to collide. Without these 4 walls, the ball will fly out of the scene directly, so this 4 rectangles are necessary.
Figure 3: 4 rectangles as walls
Step 3 : For the above 4 rectangles, in the border options in the element inspector, add a border with a width of 5px, a style for realization, and a green color.
Figure 4: Adding a border
Step 4 : In the element button, add two rounded rectangles, and enter L in the first rectangle and R in the second rectangle. The font size is 44px. Then adjust the width and height of the two rounded rectangles in the "Measurement Inspector" to 90px, then add a border in the "Element Inspector" with a width of 2px, the style is realized, the color is vermilion, and finally two rectangles are placed The location of the elements is shown in Figure 5.
Figure 5: Add two rectangles, L and R
Step 5 : Similarly, in the element button, add two more rectangles, the width of the rectangle is 283px, the height is 17px, and then add a solid blue border with a size of 2px, and then in the "Metrics Inspector", set The rotation angle (Z, X, Y) of one rectangle is (20, 0, 0), the rotation angle of the other rectangle is (-20, 0, 0), and finally two rectangles are placed as shown in Figure 6 below Position, and make sure they are on the same horizontal line.
Figure 6: Join the lever rectangle
Step 6 : In the element button, add a rectangle and an oval, then set the width and height of the rectangle to 79px, and add a solid green border of 2px; set the width and height of the oval to 48px, and add 2px A solid white border, and finally set the opacity of the oval at 0 to 0. Here you can adjust the size of the ellipse according to your own needs. If it is larger, the difficulty of the game will naturally become smaller, and if it is smaller, the difficulty of the game will increase.
After completing the size setting, drag the position of the element and place it as shown in Figure 7.
Image source: Mobile Game Agent http://www.walajiao.com/Mobile Game Agent
Figure 7: Add obstacles and balls
Step 7 : Finally, add a button to the element button, write the text "Reset", set an appropriate background color, and then place it in the red box in Figure 8 below. This button is used to start or reset the game when clicked.
Image source: Mobile Game Agent http://www.walajiao.com/Mobile Game Agent
Figure 8: Add the Reset button
Then the static scene page in this section is finished here, but the completion of the scene can only be considered as half of the mini game, and the game still needs to add some dynamic events to be officially completed.