Код обхода препятствий?

@alp7 · Регистрация: 02.09.2017

Студворк — интернет-сервис помощи студентам

Делаю карту. Сделал тайлы, - стены. И пока речь идет об 1 тайле и 1 коллизии - все нормально, то есть персонаж под углом подходит к стене, допустим и движется вдоль к щелчку мыши за стеной. Но 2 тайла впритык уже все стопорится. Если из них сделать стены и стены перегородки между 2 комнатами, то вообще ничего не работает.
тайл сделан как массив.
То есть нужно, чтобы персонаж подходил к любой из 4 стен и двигался сохраняя, ту скорость, вектор движения которой не ограничен.

@8Observer8 · 20.02.2023, 19:05

Скорее всего, вы хотите написать своё решение без физических движков. Но напишу на будущее на чём может быть проще и быстрее решать некоторые задачи (детектирование столкновений, raycasting, физика и т.д.). В игровых движках типа Unity и Godot задачи с столкновениями решаются с помощь встроенных физических движков. Например, для 2D в Unity и Gogot встроен Box2D, а для 3D - PhysX и Bullet Physics.

Есть порты Box2D на JavaScript и TypeScript, например:

box2d-wasm - прямая сборка Box2В в WASM с помощью Emscripten
@box2d/core - переписанный Box2D на JS и TS
planck.js - переписанный Box2D на JS и TS

Есть самостоятельные физические движки, то есть не порты Box2D:

Пример подключения Matter.js с помощью importmap с размещением в песочницах PlayCode и Plunker, где возможно создавать примеры с несколькими файлами:

PlayCode: https://playcode.io/1211140
Plunker: https://plnkr.co/edit/CLvnZIBOHVQXzUSt

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
 
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
 
<body style="caret-color: transparent;">
    <canvas id="renderCanvas" width="400" height="400"></canvas>
 
    <!-- Since import maps are not yet supported by all browsers, it is
        necessary to add the polyfill es-module-shims.js
        Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.4.3/+esm",
                "matter-js": "https://cdn.jsdelivr.net/npm/matter-js@0.19.0/+esm"
            }
        }
    </script>
 
    <script type="module" src="js/main.js"></script>
</body>
 
</html>

js/main.js

JavaScript
1
2
3
4
import { mat4, vec3 } from "gl-matrix";
import { default as Matter } from "matter-js";
 
console.log(`Matter.js version: ${Matter.version}`);

@alp7 · 20.02.2023, 20:39 **[ТС]**

Спасибо, буду изучать.
Был уверен, что Box2D это для гравитации, платформеров и т.д. А у меня вид сверху.

@8Observer8 · 30.03.2023, 00:02

У Planck.js отличное руководство. Разработчики Planck.js просто переделали официальное руководство Box2D. Но у Planck.js есть огромный недостаток - отсутствует рисование коллайдеров, то есть класс b2Draw не был переписан на JS. Зато есть много официальных примеров: https://piqnt.com/planck.js/8-Ball Их туториалы и примеры можно использовать в других портах Box2D на JS.

Есть такой порт под названием box2d-wasm, а точнее это сборка Box2D из C++ в WebAssembly (WASM) с помощью Emscripten. Так вот, в box2d-wasm я обнаружил очень неприятный баг: RayCast doesn't work in my simple example, то есть не работает посылание луча. Но всё-таки скину рабочий пример с падающим квадратом, может потом решат:

Демка в песочнице: https://plnkr.co/edit/exqhktfXnvxwtBRq?preview
Исходники: debug-drawer-box2dwasm-js.zip (6.3 Кб)

Миниатюры

@8Observer8 · 30.03.2023, 00:13

Пока что лучшей порт, который я находил - это box2d-core. У него есть небольшая проблема с рисованием коллайдеров - это сдвиг поворота коллайдера на несколько градусов, но это некритично.

PlayCode: https://playcode.io/1211513
Plunker: https://plnkr.co/edit/zTthXbGVITITERkL
Исходники: collider-angle-offset-problem-box2dcore-js.zip (6.6 Кб)

Миниатюры

@8Observer8 · 30.03.2023, 00:20

Сообщение от 8Observer8

У Planck.js отличное руководство. Разработчики Planck.js просто переделали официальное руководство Box2D. Но у Planck.js есть огромный недостаток - отсутствует рисование коллайдеров, то есть класс b2Draw не был переписан на JS. Зато есть много официальных примеров: https://piqnt.com/planck.js/8-Ball Их туториалы и примеры можно использовать в других портах Box2D на JS.

Это руководство находится на Wiki разделе их репозитория: https://github.com/shakiba/planck.js/wiki

@alp7 · 30.03.2023, 18:31 **[ТС]**

Спасибо, почитаю. Пока игру (геймдизайн) переделал.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@alp7 43 / 3 / 3 Регистрация: 02.09.2017 Сообщений: 217

	Код обхода препятствий? 19.02.2023, 22:01. Показов 1647. Ответов 6 Метки js (Все метки) Делаю карту. Сделал тайлы, - стены. И пока речь идет об 1 тайле и 1 коллизии - все нормально, то есть персонаж под углом подходит к стене, допустим и движется вдоль к щелчку мыши за стеной. Но 2 тайла впритык уже все стопорится. Если из них сделать стены и стены перегородки между 2 комнатами, то вообще ничего не работает. тайл сделан как массив. То есть нужно, чтобы персонаж подходил к любой из 4 стен и двигался сохраняя, ту скорость, вектор движения которой не ограничен. 0

@alp7 43 / 3 / 3 Регистрация: 02.09.2017 Сообщений: 217
	20.02.2023, 20:39 [ТС]
	Спасибо, буду изучать. Был уверен, что Box2D это для гравитации, платформеров и т.д. А у меня вид сверху. 0

@alp7 43 / 3 / 3 Регистрация: 02.09.2017 Сообщений: 217
	30.03.2023, 18:31 [ТС]
	Спасибо, почитаю. Пока игру (геймдизайн) переделал. 0