Итак, я хочу написать браузерную игру. Лунные биты. Часть 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). Все, что мне нужно сейчас, это применить скорость, это постоянное движение во времени кажется неестественным. Вот как я это сделал:
Теперь он движется немного слабее:
Исправьте анимацию с помощью этих формул:
Вращение:
Движущийся:
И константы:
Прохладный! У меня есть персонаж, который может вращаться и двигаться. Следующим шагом является добавление проверки столкновения со стеной, приближение к стене, когда это происходит, и добавление игровых объектов, таких как двери, и предметов коллекционирования, таких как артефакты и расходные материалы.