panda3d и webgl
|
|
serg-kkz | Дата: Четверг, 01.09.2022, 13:17 | Сообщение # 16 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Ты уже близко к завершению первого этапа, и да я тебя запутал. Со сборкой панда из за кроссплатформенности не все так однозначно с командами. Правильно в данном случае будет так.
Код call D:\emsdk\emsdk_env.bat python makepanda/makepanda.py --nothing --use-python --use-vorbis --use-bullet --use-zlib --use-freetype --use-harfbuzz --use-openal --no-png --use-direct --use-gles2 --optimize 4 --static --target emscripten --threads 4 pause
Обычно в винде используется команда в таком виде.
Код call makepanda/makepanda.bat --nothing --use-python --use-vorbis --use-bullet --use-zlib --use-freetype --use-harfbuzz --use-openal --no-png --use-direct --use-gles2 --optimize 4 --static --target emscripten --threads 4
Это связано с тем в винде нет по умолчанию питона. Поэтому запускается батник, который копирует питон из папки thirdparty. Но в нашем случае папка содержит только библиотеку питона, там нет интерпретатора. Но так ты уже установил питон, то эта команда актуальна. Что касается других библиотек, а именно звука OpenAL то как я понял он есть в Emscripten SDK.
Я решил проблему с xcopy, это было что то в моей винде, В данный момент все работает, я проверил Emscripten и он собирает панду. Думаю сделаю видео по первому этапу, и можно будет переходить к второму, запустить на локальном компе пример.
ООП -
|
|
| |
serg-kkz | Дата: Четверг, 01.09.2022, 14:41 | Сообщение # 17 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Вот первая часть, как собрать панду для веб-браузера. https://youtu.be/iR3r7_yrpzw
ООП -
|
|
| |
fron_de_bef | Дата: Четверг, 01.09.2022, 21:34 | Сообщение # 18 |
Сержант
Группа: Пользователи
Сообщений: 36
Награды: 0
Репутация: 5
Статус: Offline
| ждем 2 часть
|
|
| |
serg-kkz | Дата: Пятница, 02.09.2022, 13:04 | Сообщение # 19 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Уже не знаю, когда будет.
1. Нужно выяснить где взять OpenAL библиотеку 2. И что за ошибка связная с модулем времени питона.
ООП -
Сообщение отредактировал serg-kkz - Пятница, 02.09.2022, 13:05 |
|
| |
serg-kkz | Дата: Суббота, 03.09.2022, 13:21 | Сообщение # 20 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Как мне подсказали на официальном форуме, что ошибка с модулем питона кроется в несоответствии версий компиляторов. Это значит нужно первую часть повторить с тем компилятором Emscripten, который использовался для создания библиотеки питона python3.8.
Что касается сторонних зависимостей, в частности OpenAL, то это возможно. Но нужно муторно настраивать компиляцию, например требуются заголовки линукса и тому подобное. Я уже думаю что проще заиметь копию Линукса для этих целей. Далее собрать что требуется и дальше работать в винде.
ООП -
|
|
| |
serg-kkz | Дата: Воскресенье, 04.09.2022, 00:59 | Сообщение # 21 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| В общем продуктивнее заново пересобрать панду с нужным компилятором. Читайте описание под видео.
https://youtu.be/XgO7jMN6s-o
ООП -
|
|
| |
serg-kkz | Дата: Воскресенье, 04.09.2022, 02:43 | Сообщение # 22 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Ну чтоб ты не потерялся с удалением всего лишнего, я сделал минимальный пример страницы. Но ты можешь пойти дальше, оставить только то что находится внутри тега body Сразу скажу придётся тебе дополнительно изучить html верстку, но это не сложно. А вот JavaScript ты должен знать как питон, потому что тебе нужно взаимодействовать с твои приложением каким то образом.
Код <!doctypehtml>
<html lang=en-us>
<head> <meta charset=utf-8> <meta content="text/html; charset=utf-8" http-equiv=Content-Type> <title>Roaming Ralph</title> </head>
<body> <canvas id=canvas></canvas> <script> Module = { canvas: function(){ var canvas = document.getElementById('canvas'); canvas.contentEditable = true; // Focus the canvas when the mouse enters it. canvas.addEventListener('mouseenter', function(){ canvas.focus(); }, false ); return canvas; }(), }; </script> <script async src="roaming-ralph.js"></script> </body>
</html>
ООП -
Сообщение отредактировал serg-kkz - Воскресенье, 04.09.2022, 02:49 |
|
| |
fron_de_bef | Дата: Воскресенье, 04.09.2022, 18:51 | Сообщение # 23 |
Сержант
Группа: Пользователи
Сообщений: 36
Награды: 0
Репутация: 5
Статус: Offline
| Почему как только я настрочу пафосный ответ, форум его сжирает? Повторюсь кратко. Спасибо большое, пример с ральфом у меня запустился(именно с загрузкой на яндекс). Сейчас буду тестить свой личный пример.
|
|
| |
serg-kkz | Дата: Воскресенье, 04.09.2022, 19:16 | Сообщение # 24 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Я думаю проблема с визуальным редактором который использует JavaScript, проще писать в режиме BB кодов. И да нет смысла писать больше посты, лучше маленькие и часто, как возникнет проблема или мысль какая то.
ООП -
|
|
| |
fron_de_bef | Дата: Вторник, 04.10.2022, 13:12 | Сообщение # 25 |
Сержант
Группа: Пользователи
Сообщений: 36
Награды: 0
Репутация: 5
Статус: Offline
| И снова я по этому вопросу. Для начала, я не уверен что моя проблема завязана именно на панде, но все же есть подозрение.
Суть проблемы. Создал я небольшую тестовую игрушку, все работает, все запустилось(с учетом требований яндекс с их вставками). Отправил я значит на модерацию, мне пришел отказ с пометкой "подправь верстку, что бы было по центру и растягивалось в зависимости от разрешения браузера". Начал я изучать основы CSS и пробовать на моем проекте. И тут начинается интересное. Выровнять по центру с учетом изменения размера окна, для меня не составило проблем(то есть я не совсем криворукий, а код работает и настроен правильно). Но вот растягивание/сжатия окошка самой игры у меня не происходит, как бы я не бился. Я перелопатил много статей/видео, но все они как один пишут что нужно банально поставить значение width: 100%(есть дополнительные настройки но это прям совсем тонкости). Далее я пошел на эксперимент, загрузил только картинку. И вот чудо с картинкой все эти способы почему то работают, все сжимается и растягивается. И вот сижу я и думаю, как такое может быть, половина CSS кода работает а вторая половина нет. Ну не может же быть такого верно. И собственно у меня два варианта.
1) Для блока экрана игры есть какие то хитро-выкрученные методы CSS о которых никто не пишет и нужно изучать полностью. 2) Что то в самой Панде/сборке мешает, ведь все таки изначально она не рассчитывалась под web
хотелось бы знать твое мнение, что бы хотбя знать в какую сторону тыкаться
index Код <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="stylesheet" href="assets/web/style.css"> <title>игра</title> <script src="https://yandex.ru/games/sdk/v2"></script> <script> YaGames.init().then(ysdk => { ysdk.adv.showFullscreenAdv(); };); </script> </head> <body> <div id='wrapper'> <canvas id=canvas></canvas> <script src="game.js"></script> </div> </body> </html>
css Код #wrapper { width: 100%; margin: 0 auto;
}
Сообщение отредактировал fron_de_bef - Вторник, 04.10.2022, 13:15 |
|
| |
sergeikorotkov85 | Дата: Вторник, 04.10.2022, 13:54 | Сообщение # 26 |
Рядовой
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline
| Я вообще не понял в чем твоя проблема, для себя я сделал так и все работает.
Код <!doctypehtml>
<html lang=en-us>
<style> .out { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; overflow: auto; } </style>
<head> <meta charset=utf-8> <meta content="text/html; charset=utf-8" http-equiv=Content-Type> <title>Music Box</title> </head>
<body> <button fullscreen>Полный экран</button> <canvas class="out" id=canvas style="background: #000000;"></canvas>
<script> Module = { canvas: function(){ canvas = document.getElementById('canvas'); canvas.addEventListener('mouseenter', function(){ canvas.focus(); }, false); document.addEventListener('click', function(event){ if (!event.target.hasAttribute('fullscreen')) return; if(document.fullscreenElement){document.exitFullscreen();} else{document.documentElement.requestFullscreen();} }, false); return document; }(), }; </script> <script async src="music-box.js"></script> </body>
</html>
|
|
| |
fron_de_bef | Дата: Вторник, 04.10.2022, 15:43 | Сообщение # 27 |
Сержант
Группа: Пользователи
Сообщений: 36
Награды: 0
Репутация: 5
Статус: Offline
| Посеял пароль от аккаунта? Ребрендинг? Прятание от слежки? Спасибо за помощь, я если честно так и не понял в чем была проблема. Подозреваю в самом index я что то пропустил, потому что что то подобное я уже делал и это не работало(я про то что стили записаны в самом индексе, а не выводили отдельно в css). Я все опробовал на моем шаблоне - все работает.
Код <!DOCTYPE html> <html> <style> .out { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 100%; max-width: 1024px; max-height: 768px; overflow: auto; } </style>
<head> <meta charset="UTF-8"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>игра</title> <script src="https://yandex.ru/games/sdk/v2"></script> <script> YaGames.init().then(ysdk => { ysdk.adv.showFullscreenAdv(); }); </script> </head> <body> <div id='wrapper'> <canvas class="out" id=canvas style="background: #000000;"></canvas> <script src="game.js"></script> </div> </body> </html>
Теперь в связи с растягиванием пойду разбираться с кнопками(я с самого начала знал что разница координат в расчетах в aspect2d и render это зло), но это уже мелочи(наверное)
Сообщение отредактировал fron_de_bef - Вторник, 04.10.2022, 15:44 |
|
| |
serg-kkz | Дата: Вторник, 04.10.2022, 16:44 | Сообщение # 28 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Пароль у меня записан, но слишком долго его повтор вводить, когда вдруг в один прекрасный момент форма входа вдруг обнулилась. Обрати внимание:
Код <div id='wrapper'> </div>
ты таблицу стилей применял к тегу блока в котором у тебя находился холст(canvas), в примере с картинкой ты вероятно всего применял к тегу изображения и это сработало. Теперь ты применяешь как надо к холсту, то есть настраиваешь стиль холста. Если ты все таки хочешь разместить внутри блока, то тебе нужно настроить холст на нужное поведение относительно этого блока отступ, выравнивание и прочее.
ООП -
|
|
| |
fron_de_bef | Дата: Четверг, 06.10.2022, 11:39 | Сообщение # 29 |
Сержант
Группа: Пользователи
Сообщений: 36
Награды: 0
Репутация: 5
Статус: Offline
| Это фиаско, блин столько упарываться, а в итоге наткнуться на такой вот баг и все коту под хвост. Для начала нужно извиниться родитель в кнопках aspect2d тут не причем. Насколько я понял(я проверял координаты с помощью мыши и вывода ее координат) когда окно игры сжать координатная система не стягивается. То есть если изначально левая граница по координатам -1 а правая 1, то после сжатия левая граница -1 а правая 0,5 или 0,1 0 и т. д.
Я думаю такое уже не исправить, хотя ради приличия закинул тему на форум программистов по верстке и сюда, мало ли.
|
|
| |
serg-kkz | Дата: Четверг, 06.10.2022, 18:21 | Сообщение # 30 |
Генерал-полковник
Группа: Модераторы
Сообщений: 803
Награды: 3
Репутация: 18
Статус: Offline
| Я опять не понял причем тут верстка, тут проблема с кодом панда. Тебе нужно выложить часть кода как ты настраиваешь линзу камеры, как ты отслеживаешь изменения окна и в конце концов обновляешь ли трансформацию у камеры с учетом размера окна и так далее.
ООП -
|
|
| |