Итак, я хочу написать браузерную игру. Лунные биты. Часть 1.

Я немного поработал, поэтому хочу показать структуру проекта:

общедоступный/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <canvas width="800" height="600" id="render"></canvas>
  </body>
</html>

src/game/constants.js:

Я не думаю, что вы будете копировать мой код, поэтому я вставлю его в виде изображений, это выглядит намного лучше, когда слова выделены.

источник/игра/index.js:

Как видите, у меня есть первая структура, класс Core кажется перегруженным, но пока все в порядке. Я до сих пор не знаю, какая структура мне нужна для этого проекта.

На данный момент модель персонажа может вращаться над точкой стояния, может мгновенно перемещаться в точку, по которой щелкнули, мне нужно добавить анимацию перемещения, а также позволить игроку перемещать персонажа в другую точку в любое время, поэтому эта анимация должна быть прерываемой.

Что у меня есть сейчас:

Если pickPoint (означает, если щелчок указателя нашел какую-либо сетку), затем поверните в точку, затем переместите символ в точку.

Довольно прямолинейно. Добавим анимацию. Добавьте скорость игрока в константы:

Обновите moveCharacterToPoint следующим образом:

Вот как он движется:

Я был удивлен и обрадован, когда понял, что анимацию можно прерывать из коробки (BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT). Все, что мне нужно сейчас, это применить скорость, это постоянное движение во времени кажется неестественным. Вот как я это сделал:

Теперь он движется немного слабее:

Исправьте анимацию с помощью этих формул:

Вращение:

Движущийся:

И константы:

Прохладный! У меня есть персонаж, который может вращаться и двигаться. Следующим шагом является добавление проверки столкновения со стеной, приближение к стене, когда это происходит, и добавление игровых объектов, таких как двери, и предметов коллекционирования, таких как артефакты и расходные материалы.