HTML5 캔버스 크기 조정 및 엘프 크기 조정

15831 단어 htmlgamedevcanvasjavascript

HTML5 캔버스 크기 조정 및 엘프 크기 조정


HTML5/JavaScript를 사용하는 게임을 개발하고 있습니다. 문제가 발생했습니다. sprites은 8x8px로 만들어졌습니다. 너무 작아서 고해상도 모니터에서 볼 수 없습니다.뿐만 아니라 나는 캔버스의 크기가 어떤 디스플레이에도 적응하고 나의 정령을 왜곡시키지 않기를 바란다. 나는 캔버스가 창문 전체를 차지하는 것을 원하지 않는다.
8x8px 정령의 예입니다.너무 작아!
그림% 1개의 캡션을 편집했습니다. 그림% 1개의 캡션을 편집했습니다. 그림% 1개의 캡션을 편집했습니다. 그림% 1개의 캡션을 편집했습니다.다음과 같이 설명합니다.
먼저 용기 <canvas>에 <div>을 생성합니다.
 <div id="game">
  <canvas id="canvas"></canvas>
</div>
다음은 화포가 중심에 유지되도록 스타일을 추가해야 합니다.<body>과 <html>의 여백을 삭제하여 창의 100%를 차지합니다.그리고 flexbox를 용기 <div>에 추가하고 높이와 폭을 100%로 설정합니다.
html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

#game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
현재 <canvas>과 캔버스 상하문에 대한 인용을 얻고 초기 너비와 높이를 설정합니다.SIZE은 정령의 크기를 나타내며 너비 8픽셀, 높이 8픽셀이다.map은 내 2D 배열을 나타냅니다.지도를 만드는 방법은 본문의 범위를 넘어섰지만, 원본 코드를 보고 어떻게 완성되었는지 알 수 있습니다.
const ctx = document.getElementById('canvas').getContext('2d');

// size of each 'tile'
const SIZE = 8;

// native width and height (does not change)
const nHeight = SIZE * map.length;
const nWidth = SIZE * map[0].length;

function render() {
  tiles.forEach(tile => {
    ctx.drawImage(tilesheet, tile.srcX, tile.srcY, SIZE, SIZE, tile.x, tile.y, SIZE, SIZE)
  })
}

window.addEventListener('load', () => {
  ctx.canvas.width = nWidth;
  ctx.canvas.height = nHeight;
  buildMap();
  render();
})
원본 게임 해상도를 사용하기 때문에 캔버스는 매우 작을 것입니다. (이 예에서는 56x40).기본 게임 해상도는 변경되지 않습니다.그것은 역할의 이동, 충돌 등 게임의 논리에 사용된다.
본체 해상도 56x40의 게임 지도 예시
캔버스의 크기를 조절하기 위해서는 캔버스 해상도의 단독 너비와 높이를 추적해야 합니다.그림% 1개의 캡션을 편집했습니다. 그림% 1개의 캡션을 편집했습니다.너는 이것을 가지고 놀 수 있다.이 두 가지 또는 그 중 어떤 설정도 필요하지 않거나 필요하지 않을 수 있습니다.
// I just picked 20 at random here.
// In this instance maxWidth = 56 * 20 = 1,120 and maxHeight = 40 * 20 = 800
const maxMultiplier = 20;
const maxWidth = nWidth * maxMultiplier;
const maxHeight = nHeight * maxMultiplier;

// % of browser window to be taken up by the canvas
// this can just be set to 1 if you want max height or width
const windowPercentage = 0.9;

// the canvas' displayed width/height
// this is what changes when the window is resized 
// initialized to the native resolution
let cHeight = nHeight;
let cWidth = nWidth;
현재, 불러올 때, 캔버스 사이즈를 본 컴퓨터의 해상도가 아닌 캔버스 해상도에 사용할 변수로 설정하기를 원합니다.resize을 감시하고 캔버스의 크기 조정과 렌더링을 처리하기 위해 이벤트 탐지기를 설정해야 합니다.
window.addEventListener('load', () => {
  // initialize native height/width
  ctx.canvas.width = cWidth;
  ctx.canvas.height = cHeight;
  buildMap();
  resize();
  render();
})

window.addEventListener('resize', () => {
  resize();
  render();
})

function resize() {
  cWidth = window.innerWidth;
  cHeight = window.innerHeight;

  // ratio of the native game size width to height
  const nativeRatio = nWidth / nHeight;
  const browserWindowRatio = cWidth / cHeight;

  // browser window is too wide
  if (browserWindowRatio > nativeRatio) {

    cHeight = Math.floor(cHeight * windowPercentage); // optional
    if (cHeight > maxWidth) cHeight = maxHeight; // optional

    cWidth = Math.floor(cHeight * nativeRatio);
  } else {
    // browser window is too high

    cWidth = Math.floor(cWidth * windowPercentage); // optional
    if (cWidth > maxWidth) cWidth = maxWidth; // optional

    cHeight = Math.floor(cWidth / nativeRatio);
  }

  // set the canvas style width and height to the new width and height
  ctx.canvas.style.width = `${cWidth}px`;
  ctx.canvas.style.height = `${cHeight}px`;
}
resize()에서 먼저 cWidth과 cHeight(캔버스 해상도 변수)을 창의 innerWidth과 innerHeight으로 설정합니다.그런 다음 기본 해상도와 브라우저 창의 너비가 필요합니다.창의 innerWidth/innerHeight(cWidth/cHeight) 비율이 기본 해상도(nWidth/nHeight)보다 크면 브라우저가 너무 넓어서 정확한 비율에 맞게 폭을 다시 계산해야 합니다.그렇지 않으면 브라우저 창이 너무 높아서 높이를 다시 계산해야 합니다.
최대 창 비율을 설정하려면 먼저 maxPercentage을 곱하여 새 캔버스 너비/높이를 설정합니다.maxWidth/maxHeight를 사용하려면 cWidth 및 cHeight의 값이 더 큰지 확인하고, 더 크면 최대값으로 설정합니다. 이 모든 값을 사용한 후에 최종 새 너비나 높이 값을 설정할 수 있습니다.새로운 cWidth은 cHeight을 nativeRatio에 곱하여 계산한 것이고, 새로운 cHeight은 cWidth을 nativeRatio으로 나누어 계산한 것이다.
다음은 canvas의 스타일 속성의 폭과 높이를 새로운 cWidth과 cHeight으로 설정합니다."codepen "
마지막으로 github을 image-rendering: pixelated 스타일에 추가하면 픽셀 예술이 모호하지 않습니다.
canvas {
    image-rendering: pixelated;
}
게임 맵 예시를 약 864x617로 확대
그렇겠지.나는 내가 캔버스, 설치 정령, 게임 지도에 관한 선험 지식을 많이 가설했다는 것을 알고 있다. 그러므로 만약 네가 발버둥치고 있다면 평론을 남겨라. 아마도 나나 다른 독자들이 너를 도울 수 있을 것이다.
만약 당신이 이 주제에 대한 더 많은 내용을 읽거나 볼 흥미가 있다면, 여기에 링크가 있습니다.

  • HTML5와 JavaScript를 갖춘 고급 게임 디자인, 저자: 렉스 판더스프
  • Arjan Egges는 핸드폰, 태블릿PC, 데스크톱을 위한 자바스크립트 게임
  • Canvas.width and canvas.height set the size of the canvas. canvas.style.width and canvas.style.height set the resolution.
    • Docker Laravel 6를 이용한 HMR(Hot Module Replacement)
    CSS 및 HTML을 사용하여 간단한 로더 작성

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage