This section is the last section of this tutorial. The main content of this section is to take you to use Hype's physical quantity function, to assign physical quantities to some elements, to complete the development and production of the game, and then to optimize the settings of some web pages to improve the game experience.
One, apply physical quantity
In Hype, the physical quantity of each element newly created is "disabled? No physical quantity applied" by default, as shown in Figure 1.
Figure 1: Default element physical quantity
Therefore, you need to manually apply specific physical quantities to certain specific elements, and you follow the editor to analyze the wave. Because the small ball needs element collision to provide elasticity, some elements need to apply physical quantity to provide elasticity. Among them, the elements that need to provide elasticity are: four rectangular walls up, down, left, and right, and two rectangles that can be tilted and released on the left and right. , Rectangular obstacles moving horizontally above.
Therefore, you need to select these elements mentioned above, and then in the "Physical Quantity Inspector", set the element physical quantity to "Static? Interaction, no movement", and more importantly, set the refund coefficient, which is actually the elastic coefficient of the element The coefficient value given by the editor here is 0.58, as shown in Figure 2. After all, if the elasticity is too large, the rebound speed of the ball will be very fast, and the game will be very difficult. It is still very important to give an appropriate elasticity coefficient.
Figure 2: Applied physical quantity and refund coefficient
Next, apply a physical quantity to the round ball, as shown in Figure 3. The element physical quantity is selected as "dynamic? Full physical quantity main body", which means that the small ball will be affected by physical quantities such as gravity, friction, elasticity, etc., and therefore move.
Among them, the density is set to 1.0, and the density coefficient affects the mass of the ball, that is, the weight it receives. Set 1.0 here and use normal gravity; the return coefficient is 0.58, the same as other elements; the friction is set to 0.0, cancel The influence of friction prevents the ball from appearing unexpectedly and strangely moving curve due to friction; the air resistance is set to 0.1, because there is actually resistance in the air, and the addition of air resistance will make the game experience a little better; if the device supports gravity Induction, you can also check the option "Control gravity by setting tilt".
Figure 3: Applying physical quantities to the ball
2. Webpage optimization settings
After completing the above steps, the web game can run normally, but due to different mobile devices, the game experience may be different, so some related optimization settings need to be made for different devices. First of all: In the "Document Inspector", click "Edit Head HTML", as shown in Figure 4.
Figure 4: Edit header HTML
Step 2: Then add the code in the red box in Figure 5 to the opened file. This line of code is to make the web page compatible with different widths of mobile devices, while restricting the web page from being zoomed and enlarged, and optimizing the game experience.
Figure 5: Add code to the header file
Step 3: Open the "Scene Inspector", and then in "When the scene is loaded", add another operation, select "Run JavaScript" for the operation, select the new function for the function, and then name it "preventScroll", as shown in Figure 6.
Figure 6: JavaScript running when the scene loads
Step 4: At this time, Hype will open the writing interface of the new function for everyone. Just add the code in the red box below in the function. This piece of code is to prevent the default events of the browser, such as right-clicking to copy text, etc. The attribute functions that come with the device, these functions may affect the game's playing experience, so they need to be disabled.
Figure 7: Writing JavaScript code
Okay, even if this tutorial is officially completed here, let's get started and implement a little game of your own !