5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
1

Платформер на Canvas API и WebGL

02.02.2023, 02:47. Показов 971. Ответов 6

Author24 — интернет-сервис помощи студентам
Цитата Сообщение от Olga28 Посмотреть сообщение
Закончила писать небольшой платформер. Игровая механика как в Марио. Есть враги, которых можно победить с наскока. Если идти напролом, то герой упадет в обрыв и потеряет одну жизнь.



Также на пути разбросаны кубики-предметы, их можно подобрать и за это начисляются очки. В игре присутствуют движущиеся платформы, сделано так, что находясь на них, герой перемещается. Также существуют секреты, например кубы. В некоторых из них хранятся кубики-предметы, чтобы их забрать следует ударить снизу по кубу головой. Кто играл в Марио, тот поймет.

Преимущество кода. Здесь нет графических элементов, это шаблон, т.е. ссылки на картинки отсутствуют. Так что можно просто скопировать код и добавить в html и он будет работать. Из-за того что в коде отсутствуют картинки, код легко можно переделать под Delphi7.

Для каждого элемента в игре я присвоила уникальный цвет.
1.Главный герой – зеленого цвета (темный оттенок)
2.Кубы – серого цвета (темный оттенок)
3.Платформа – серого цвета (светлый оттенок)
4.Финиш (Флаг) – серого цвета (светлый оттенок)
5.Земля – оранжевого цвета
6.Кубики-предметы – светло-зеленые
7.Враги – красные
8.Травяная возвышенность – зеленый цвет

Все параметры объектов хранятся в массиве. Разбор элементов в массиве.

Javascript
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
30
31
////////////////////////
//levels[0].flag
////////////////////////
//Размещение флага по x и y
 
 
////////////////////////
//level[n].enemy1
///////////////////////
//x,y = координаты врага
//breadth - Область патрулирования
//start_direction – принимает два значения right|left, т.е. в какую сторону начинать //патрулировать при старте уровня
//speed - скорость перемещения врага
////////////////////////
// levels[n].plat - данные о кубах и платформах
////////////////////////
//x,y - координаты
//container - принимает два значение true|false. Еесть секрет в контейнере? Если да то true, //нет - false.
//containerCounter - напрямую связан с container, здесь указывается, сколько предметов //спрятано. Если 10, то герою по кубу нужно ударить головой 10 раз. 
//Длинные платформы, они принимают дополнительные значения
//mover – принимает значение “yes”, если требуется привести платформу в движение
//maxymov:100, maxxmov:0 – направление движения maxymov – по вертикали, как лифт, //maxxmov по горизонтали. Обычно указывается одно значение, второе принимает ноль  
// yspeed, xspeed – скорость перемещения платформы
////////////////////////
//levels[0].item1
////////////////////////
//x,y – размещение предметов по x и y
////////////////////////
//levels[n].grn 
//xstart, xend – стартовая и конечная точка земли. Если добавить несколько массивов с //интервалом в пикселях, то таким образом можно сделать сушу с обрывами.
////////////////////////
Код слишком большой (33 508), не помещается в один пост, поэтому я решила добавить архивом. Можете скачать и протестировать.
platformer.zip
Ваша игра в песочнице: https://plnkr.co/edit/MyH3d2Pwgy1RZ03Z (для активации управления на стрелки нужно кликнуть в акне Preview)

Перевёл на WebGL: играть в браузере. Управление: стрелки влево/вправо и стрелка вверх - прыжок.

GUI оставил на Canvas, а игровые объекты рисуются на WebGL. Элемент <canvas> для GUI находится поверх <canvas> для WebGL графики.

Демка и исходники на WebGL в песочнице: https://plnkr.co/edit/ByZGziWyn8Btf3jb (для активации управления на стрелки нужно кликнуть в акне Preview)

Прикрепил архив с исходниками. Сборка проекта:

Установить Node.js (https://nodejs.org/en/download/). В Node.js есть пакетный менеджер NPM. Надо установить глобально три пакета командой в консоли:

Код
npm i -g rollup uglify-js http-server
Далее, надо открыть консоль в корневой директории проекта "platformer-rollup-js". Я использую Notepad++ как редактор кода и из этого редактора можно открыть консоль. Надо запустить проект в debug-режиме командой:

Код
npm run dev
Теперь rollup будет следить за файлами и при изменении и сохранении файла будет собирать новый bundle.js. Надо открыть вторую консоль и ввести команду запуска локального сервера:

Код
http-server -c-1
Ключ "-c-1" означает, что браузер не будет кэшировать файлы. Теперь можно открыть вкладку браузера и ввести:

Код
localhost:8080/index.html
Можно открыть консоль браузера, например, в Chrome - Ctrl+Shift+J. Для сборки в релиз надо остановить режим отладки, нажав Ctrl+C и ввести команду:

Код
npm run release
Будет создан сжатый bundle.js, который загружается быстрее.
Вложения
Тип файла: zip olga28s-platformer-2d-rollup-webgl-js.zip (22.6 Кб, 2 просмотров)
6
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.02.2023, 02:47
Ответы с готовыми решениями:

Рисование фрактала как canvas WebGL
Здравствуйте. Мне нужно спрограммировать данный фрактал (прикреплен файл) с помощью JavaScript и...

О перспективах 3D в Браузере, WebGL и Canvas вообще
Всем привет, хочу поговорить о перспективах WebGL и библиотек/фреймворков для работы с ним...

Разработка графических приложений для сайтов. Canvas, WebGL
Занимаюсь разработкой графических приложений для сайтов (игры, черчение). Canvas, WebGL. Большой...

Можно ли сказать, что контекст canvas - объект, определяющий свойства canvas?
Можно ли сказать, что контекст canvas - объект, определяющий свойства canvas?

6
87 / 31 / 3
Регистрация: 03.06.2020
Сообщений: 345
09.02.2023, 10:38 2
классная и даже титаническая работа.
Почему такой маленький экран.
Не лучше <canvas id="drawingCanvas" width="1550" height="800"></canvas> или вообще в auto?
2
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
09.02.2023, 14:23  [ТС] 3
Цитата Сообщение от Segera Посмотреть сообщение
Почему такой маленький экран.
Я тоже так считаю. Вообще надо потихоньку всё что можно развивать и улучшать. В своей песочнице заменил на width="1550" height="800" Сейчас только обратил внимание, что в песочнице Plunker можно кликнуть по кнопке со стрелками в Preview, откроется игра в отдельном окне на весь экран и эту ссылку можно скопировать: https://run.plnkr.co/preview/c... wsmwn8u0k/

Давайте вместе все набросаем план. Кто-то может сделать Fork песочнице и что-то продемонстрировать на примере.

Первое, что в голову пришло:
  • Растягивать игровое поле на весь экран
  • Добавить звуки, например, с помощью Web Audio API
  • Найти, например, на http://opengameart.org/ и добавить какие-нибудь бесплатные тайлы и спрайты вместо цветных прямоугольников
  • Что-нибудь ещё предлагайте несложное

Можно тайлы и спрайты расположить на одном текстурном атласе с помощью бесплатной программы Free Texture Packer (сайт открывается с помощью VPN, например, с помощью плагина VeePN для браузера). А игровые объекты расставлять не с помощью координат вручную, а визуально с помощью бесплатной программы Tiled, в который можно загрузить карту тайлов, расставить объекты и экспортировать координаты и размеры объектов в JSON.

Я использую такие настройки Free Texture Packer. Здесь значения 2048 не на что не влияют:

1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
09.02.2023, 14:32  [ТС] 4
Ещё в игре есть большой недостаток - не плавность движений, дёргается картинка, это некомфортно. Игровой цикл сделан на:

Javascript
1
setInterval(update, 40);
Во-первых, получается 1000/40=25, то есть 25 кадров в секунду. Этого мало даже для физики. Можно было бы 60. У профи я видел всегда разбивают игровой цикл на два цикла - один фиксированный для физики и второй для отрисовки игровых объектов с помощью requestAnimationFrame().
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
03.03.2023, 18:07  [ТС] 5
В редакторе
Цитата Сообщение от 8Observer8 Посмотреть сообщение
игровые объекты расставлять не с помощью координат вручную, а визуально с помощью бесплатной программы Tiled, в который можно загрузить карту тайлов, расставить объекты и экспортировать координаты и размеры объектов в JSON.
Tiled - очень удобный редактор. Недавно узнал, что в нём можно не только рисовать тайловые карты и расставлять игровые объекты, но и расставлять коллайдеры для физического движка: How to export colliders



Сделал следующую демку. Тайлы и коллайдеры расставил в Tiled. Упаковал тайлы и спрайты в один текстурный атлас с помощью Free Texture Packer. Физика на OimoPhysics. Нарисовал с помощью чистого WebGL, а линейная алгебра на glMatrix. Исходники примера со спрайтовой анимацией на WebGL: Как создавать 2D спрайты из текстурки?

Демка в браузере



Миниатюры

Платформер на Canvas API и WebGL

Платформер на Canvas API и WebGL

1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
24.07.2023, 16:56  [ТС] 6
Спрайт в стиле SFML, используя WebGL 1.0 и JavaScript

Пример загружает спрайты из sprite sheet, который был создан в FreeTexturePacker и использует страйт в стиле SFML

Песочницы:
Вложения
Тип файла: zip sprite-in-sfml-style-rollup-webgl-js.zip (41.0 Кб, 5 просмотров)
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
01.08.2023, 17:00  [ТС] 7
Jumping with ground check using ray casting, Box2D-WASM, Melon.js, and JavaScript

Playgrounds/Sandboxes:

Topic and discussions:

Вложения
Тип файла: zip can-jump-with-ray-casting-box2dwasm-melonjs-js.zip (246.6 Кб, 0 просмотров)
1
01.08.2023, 17:00
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.08.2023, 17:00
Помогаю со студенческими работами здесь

Canvas JS столкновения, Как придать твёрдость объекту на HTML5 Canvas
Всем привет! Недавно начал изучать HTML5 Canvas, столкнулся с проблемой... Мне надо сделать...

Canvas html5, как разместить черный пискель в центре canvas'a?
как разместить черный пискель в центре canvas'a?

Можно ли одной процедурой рисовать на Image.Canvas и Printer.Canvas
Здравствуйте, пожалуйста, подскажите можно ли одной процедурой рисовать на Image.Canvas и...

построить функцию y=kx+b (линейная функция) с помощью Vcart или canvas (form.canvas)
Надо построить функцию y=kx+b (линейная функция) с помощью Vcart или canvas (form.canvas)

Как сделать canvas на заднем плане относительно всех других canvas-ов (слой с кругами)
package com.ua.drawfigures; import android.graphics.Bitmap; import android.graphics.Canvas;...

Как добиться одинакового размера шрифта при выводе на Image.Canvas и Printer.Canvas
Здравствуйте! Подскажите, пожалуйста, как добиться одинакового размера шрифта при выводе на...

Совместная работы функций Canvas.scale и Canvas.translate
Если указать точку опоры масштабирования в scale, то относительно неё происходит масштабирование....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru