Html5 Game Development Strategy (Canvas settings)

Source: Internet
Author: User

To draw a game scene on the page, we must have a canvas ).

Let's talk about how to set the canvas ~

Xiami? You will be there long ago? Canvas. getContext ("2d ")?

Then you are wrong. You can learn more here. Let's continue.

First, we need to know the canvas resolution settings.

In general, the standard 4: 3 Resolution of the game is 800X600, 1024X768. 960X540, 1366X768.

Suppose we want to stretch a 800X600 canvas to 1024X768. What should we do?

Do you directly set the width and height of the canvas to 1024X768? This is obviously not a stretch.

In fact, this involves a key point: hardware scaling.

Css is used in general front-end operations, which is no exception here.

Suppose we have such an element:

<canvas id="gameCanvas" width="800" height="600"></canvas>
Then we add the following css:
#gameCanvas{    width: 1024px;    height: 768px;}

If you draw something in the canvas, you will find that, wow ~ Actually scaled!

In addition, the zooming here is the hardware zooming, so the performance will be very high (provided that the device supports hardware acceleration ).

Through the above method, we know how to scale hardware. If you have already bound a mouse event before, you will find that, how can I use the mouse to retrieve the X and Y displayed in the X and Y figures? What should I do?

This is because we set the size to 1024X768 while the actual size is X. During this period, the image in the canvas has been scaled proportionally. Therefore, we need to manually calculate to make up for the difference.

Pseudo formula: Mouse X * (canvas width/css setting width) = map the mouse to the X position of the resolution used for painting

Insert the formula to calculate (assuming the current cursor is at 550X300): 550 * (800/1024) ≈ 430

Therefore, it is calculated that the current X position of the mouse points to the 430 position drawn in the canvas.

The Y position of the mouse is the same.

Okay ~ We have introduced how to scale hardware and how to get the point pointed by the mouse.

Next, let's use the above two methods to achieve a year-on-year scaling effect!

What is yoy scaling? See the figure below:

We can see that no matter how we scale the browser, the aspect ratio of the canvas remains unchanged.

This is what we need. Let's implement it now!

Step 1: Calculate the original aspect ratio. Assume that our canvas has a x resolution. So the aspect ratio is: 800/600 ≈ 1.33

Step 2: Define a function to calculate the zoom value based on the width and height of the upper layer element. Calculate the zooming value and the original width and height. Displays the elements in the upper element center.

Function resize () {// obtain the canvas Element var canvas = document. getElementById ("gameCanvas"); // upper-layer element of the canvas Element var pe = canvas. parentElement | canvas. parentNode | document. body; // the width and height of the upper layer of the Canvas Element var pw = pe. clientWidth; var ph = pe. clientHeight; // the width and height of the canvas Element var width = canvas. width; var height = canvas. height; // scaling value var scaling = Math. min (pw/width, ph/height); // you can specify the new width and height of the canvas. style. width = (width * scaling) + "px"; canvas. style. height = (height * scaling) + "px"; // if the current canvas is in the body, it is displayed in the center if (pe = document. body) {canvas. style. marginTop = (ph-height * scaling)/2) + "px"; canvas. style. marginLeft = (pw-width * scaling)/2) + "px" ;}// bind the event window. addEventListener ("resize", resize, false); // force the single-screen application mode if (pe = document. body) {var ss = document. createElement ("style"); ss. innerHTML = "html, body {margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;}"; document. getElementByTagName ("head "). item (0 ). appendChild (ss );}
That's all !~

The final year-on-year scaling plus the previous mouse position calculation is a perfect adaptive application resolution !~

This is a simple but often overlooked process.

In addition, when using the Fullscreen API in combination with this method, some computing errors may occur. You only need to modify a small part of the above Code to solve this problem. Leave it as a job ~! If you are not sure, leave salt in your comments ~~~~

Put the lastDemoEnd ~ Please look forward to the next article ~

Large-Scale Price Reduction
  • 59% Max. and 23% Avg.
  • Price Reduction for Core Products
  • Price Reduction in Multiple Regions
undefined. /
Connect with us on Discord
  • Secure, anonymous group chat without disturbance
  • Stay updated on campaigns, new products, and more
  • Support for all your questions
undefined. /
Free Tier
  • Start free from ECS to Big Data
  • Get Started in 3 Simple Steps
  • Try ECS t5 1C1G
undefined. /

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.