Постнагуализм
15 июня 2024, 18:22:24 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.

      Логин             Пароль
В разделе "Свободная территория" можно общаться без аккаунта!
"Тема для быстрой регистрации"
 
   Начало   Помощь Правила Поиск Войти Регистрация Чат Портал  
Страниц: 1 ... 6 7 [8] 9 10 ... 23  Все
  Ответ  |  Печать  
Автор Тема: [ИГРЫ] Сказки Лиса и остальной - GameDev  (Прочитано 48377 раз)
Соня (Bruja) и 9 Гостей смотрят эту тему.
Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #105 : 24 октября 2023, 16:30:32 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

COLOR A PEGASUS - Раскрась Пегаса!

Codecademy Phaser JS Lesson - урок


Игра Раскраска - Раскрась Пегаса! по этой ссылке:
https://mtapirina.github.io/color_a_pegasus/

Файлы проекта:
https://github.com/mtapirina/color_a_pegasus

***

В этом уроке мы собираемся предоставить функциональные возможности для создания нашей первой игры-раскраски под названием «Раскрась пегаса».

На этом уроке мы построим:

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


Раскраска
Нам дали базовый макет нашей игры — мы, разработчик игры, должны предоставить ту часть нашей игры, которая сделает ее играбельной. Нам нужно создать механику игры, ту часть, которая сделает ее чем-то большим, чем просто изображение пегаса.

Обновление цвета
Теперь, когда мы можем изменить цвет нашего пегаса, давайте приступим к работе над тем, чтобы сделать этот селектор палитры функциональным. Когда мы нажимаем на цвет, мы хотим, чтобы он стал выбранным цветом.

Указание выбора
Раскраска пегаса – с «игровым» аспектом нашей игры разобрались, но нужно продумать нашу подачу. Если мы хотим, чтобы кто-то, играющий в нашу игру, знал, куда нажимать и как на самом деле раскрасить пегаса, нам придется поработать над интерфейсом. Возможно, вы заметили, что нажатие на некоторые части пегаса не совсем совпадает с формами. Это связано с тем, как фигуры накладываются друг на друга. Есть много способов это исправить, но решение, которое будет работать хорошо, — дать игроку, играющему в игру, некоторое представление о том, какая часть Пегаса будет окрашена после того, как он щелкнет мышью. Мы собираемся использовать режим наложения экрана, чтобы указать, какая часть Пегаса будет выбрана. Режимы наложения определяют, как заполненная фигура взаимодействует с другими видимыми фигурами, что-то вроде изменения непрозрачности и цвета фигуры. В результате наша выделенная часть станет полупрозрачной и белой с белым контуром.

Индикация выбора палитры
Теперь в нашу игру стало намного удобнее играть, поскольку люди знают, на что они нажимают, но как мы можем отслеживать, какой цвет в данный момент активен? Добавив соответствующие события при наведении в нашу палитру Circles!

Поздравляем! Вы сделали свою первую игру «Раскрась Пегаса»! В ходе этого урока вы создали последовательность обработчиков событий, позволяющую:

Обновлять состояние игры.
Обновлять цвет отдельных частей пегаса в игре.
Выделять игровые объекты, чтобы указать, на что будет нажиматься.
Вы продемонстрировали большой контроль над вложенными событиями курсора мыши и успешно использовали этот элемент управления для создания игры-раскраски!

Дополнительно:
Добавьте в палитру новый цвет. (изменила палитру)
Раскрасьте фон, а также пегаса - цвет по умолчанию.


* color_a_pegasus.png (216.88 Кб, 1022x1138 - просмотрено 38 раз.)

* pegasus-change-color.png (203.24 Кб, 1030x1132 - просмотрено 38 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #106 : 24 октября 2023, 18:03:03 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Create a Fantasy Adventure Game - Создайте приключенческую игру в жанре фэнтези

файлы проекта
https://github.com/mtapirina/adventure_fantasy_story

Готовая игра
https://mtapirina.github.io/adventure_fantasy_story/



Создайте фэнтезийную историю в  приключенческом стиле в Phaser, используя события кликов! Кодакадемия, Phaser JS

Создание игры!
Мы собираемся разработать интерактивную игру-рассказ с орками, рыцарями и волшебниками!
Создайте фон, добавив изображение.
Давайте создадим новую функцию для рендеринга персонажа. Это обновит изображение внутри нашего фона изображением соответствующего говорящего персонажа.
Создание диалога!

Теперь, когда мы правильно отображаем наших персонажей, давайте сосредоточимся на добавлении играбельности в нашу игру.
Отображение каждой страницы для создания нашей приключенческой игры!
Сделайте взаимодействие заметным с помощью состояний наведения.
Теперь обновите диалог и текст опции! Когда вы перезагружаете игру, вы видите то, что ожидали!


* adventure_game.png (447.25 Кб, 826x1090 - просмотрено 40 раз.)

* adventure_game_fin.png (406.49 Кб, 851x1071 - просмотрено 40 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #107 : 25 октября 2023, 07:33:23 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Create a Fantasy Adventure Game - Создайте приключенческую игру в жанре фэнтези
...
Создайте фэнтезийную историю в  приключенческом стиле в Phaser, используя события кликов! Кодакадемия, Phaser JS


Этот шаблон вполне подойдет в каком нибудь ином проекте, как система диалогов, в определенных сценах.
То есть не как самостоятельная игра (по личному мнению это просто скучно). О как часть механизма другой. Посложнее. где есть персонаж, он где то приключается, а потом болтает с местными жителями или каким то ключевым неписем (не игровым персонажем, имеющим ключевую роль)..
Ну или с драконом, перед последним сражением..
система диалогов довольно сложная фигня. помню на юнити ее создавала как отдельный плагин, встраиваемый и заполняемый для отдельной игры..
Тут же довольно любопытное написание.. и все диалоги по сути - обхекты джава скрипт, со своими парами -
ключ:значение.
То есть кто когда и что после делать..
То есть есть диалоги, фразы-которые выводят из самого диалога. Спросил герой ерунду какую то, и все,  его послали на х.. Диалог оборвался. А что бы выпытать побольше - персонажу нужно либо умно как то беседу вести, чтоб собеседник раскололся и выдал нужное инфо, либо иметь стат- ну например обладать высоким уровнем шарма.. тогда ему раскроют легко все секреты.. кроме квестовых.. но все напводки отдадут без утаек..
кто играл в Столпы Вечности, наверняка помнит тамошние диалоги.. То ли ум нужен чтоб определенную инфу получить, то ли сила (запугать) то ли еще какой стат..
Любопытно.. преподносят куски, но довольно практически нужные.. Большой проект без них не слепишь.


сейчас мы на физике, симуляции Фазера физичекских взаимодействий. Ну конечно, гравитация, физ тело - и коллайдер  нацепленный на тело (невидимый игроку - детектор столкновений. На картинке внизу это тот розовый квадратик вокруг тел жука и героя. Зеленая линия гравитация и ее сила.. сильнее гравитация - длиннее линия. В игре этого потом видно не будет. Это чисто дебаг для разработчика).
Любопытно сделана установка назначение, физики объектам и спрайтам (картинкам), как мобильным - подвижным, так и статическим, таких как  платформы, стены и прочие препятствия..

сравниваю с юнити и си шарпом..

Что то похоже делается. Что то совсем иначе..

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

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

Ну и зюма канечно, лягуха плюющая шариками..





* Снимок экрана 2023-10-25 в 02.23.24.png (80.89 Кб, 668x988 - просмотрено 48 раз.)

* Снимок экрана 2023-10-25 в 02.23.42.png (53.43 Кб, 862x296 - просмотрено 40 раз.)

* Снимок экрана 2023-10-24 в 04.51.52.png (253.44 Кб, 1498x854 - просмотрено 43 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #108 : 26 октября 2023, 17:24:08 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

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

Хочу немного потом доработать то что получилось..
Потом подгружу ссылки сюда.

Сейчас мы учим Классы джаваскрипт. Они в Фазере нам понадобятся, для создания и подгрузки разных сцен. Начальное окно, сцена с игрой, и концовка.. В дальнейшем конечно можно так же грузить уровни игры, например или иные помещения, в которые заходит герой..

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

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #109 : 01 ноября 2023, 22:24:56 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

охота на крота
каждая сцена (ну это на юнити мы еще лепили)-- тут - это отдельный файл JS.
Есть так же файл game.js - он связывает воедино наши сцены и помогает контролировать поток между каждой из них.

Все это отображается в браузере, посредством index html, в котором в <head> - прописана, помимо стандарного набора линков - только канва (игровое поле, за пределы которого игрок или персонаж типа крота - не выходит) , ее размеры. И пристегнуты все скрипты в <body>, все какие есть.
Пустая страница html по сути..
Нет стиля css файла..
Все прелести в скриптах сцен, которые подгрузят нужный антураж (картики)..

Закончу, покажу...
Так как мы только учимся, там уже есть большая часть кода. Но она не работает. Функциональность придется встраивать нам, ученикам..

Поиграть потестить можно тут:
https://mtapirina.github.io/mole_unearther/

Файлы проекта лежат тут:
https://github.com/mtapirina/mole_unearther

Игра «Выкопай крота»

Курс Codecademy PHASER JS

Давайте используем то, что мы узнали о функциях и переменных, для создания игровой сцены, запуска игровой логики и обработки пользовательского ввода. Солнце проснулось и взошло, но и наш надоедливый крот тоже! Мы создали три норы, из которых может вылезать крот, и пользователь должен поймать крота, нажав на клавишу клавиатуры с буквой норы как можно больше раз, прежде чем время истечет. Если нажата буква соответствующая  правильной норе, пользователь вознаграждается очками, и крот перейдет в другую нору. Если нажата не та буква, очки пользователя вычитаются.

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


Дополнительно:

Добавьте еще одну нору наверху, чтобы крот мог перемещаться и туда тоже. (изначально - 3 работающие норы)


* 277721499-2e4e3d9e-8fd0-4499-93b9-56f540afe2e3.png (169.06 Кб, 946x1284 - просмотрено 36 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #110 : 02 ноября 2023, 09:56:26 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Учу Кодю прыгать. А так же, учусь генерировать для него уровни..
Чтоб не всегда ручками левелы лепить..


* Снимок экрана 2023-11-02 в 07.55.04.png (74.54 Кб, 888x960 - просмотрено 34 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #111 : 05 ноября 2023, 19:01:11 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Закончила фазер, взяла сертификат об окончании курса.
 это даже не курс, а ...  skill path, что то вроде пути навыков, то есть добавочные знания или база.. которая задает направление для последующего изучения более детально.

Все прекрасно, кроме последнего проекта, который типа зачетной работы.
По личному мнению игра совершенно не интересная, не понятно вообще на какую публику рассчитана..
Может это лично мое отвращение к проекту, но я его доделала вообще не вникая в то, что делаю..
Под конец меня отчетливо подташнивало..
Какая то дурацкая игра в общепит.. или мак бургер..
Строится очередь, разной степени голодности, и игрок ( работающий за повора или обслуживающий персонал быстропита) должен подать всего три блюда. Каждое соответствует баллу - 1, 3, 5.
Ну надо так выбрать цифры- блюда  ( нажимая три кнопки на клавиатуре), чтоб заказ был ни переполнен , ни недополнен..
Там типа подносик у заказчика и можно видеть ячейки, которые заполняются, пока вы выбираете нужные кнопки ( соответствующие цифрам), что бы получить нужное число - уровень голода клиента).
За правильно подобранные заказы клиент вас оценивает в 5 звезд.
Чем сильнее вы отклоняетесь от удовлетворения его голода, тем меньше звезд собираете.
Если звезд вы набрали слишком мало, то после первого раунда игра оканчивается. Если вы набрали определенную сумму звезд, то общепит работает, и клиенты выстраиваются снова в очередь. Второй круг игры по обслуживанию начинается..

Сама идея игры такая дурь по моему, что только отвращение берет живоглотов цифровых насыщать.

Но благо в процессе было очень много интересных тем. И  с Коди ( это символ академии, типа как наш олимпийский мишка), с ним мы разрабатывали основы платформера, и немного поведение врагов.
Уровни, смены дня и ночи с каждым уровнем.. погоду! То есть в Тундре, где Коди бегал по платформам в поисках костра, чтоб отогреться - было то утро, то вечер, то день или ночь. Утром начинали падать первые редкие снежинки, а к вечеру все это превращалось в метель. Ночью затишье и красивые звезды сияли в небесах..
Звезды красиво смещались с помощью эффекта паралакса.. то есть одни двигались когда герой бежал вперед. Другие оставались на местах..
Да, там были уроки по камерам, как настраивать, как трясучку устраивать shake cam, например если герой падает в пропасть, или запрыгивает на платформу.. типа буумм!! Только безмолвный.
Вставляли музыку в фон и спец эффекты к конкретным действиям или событиям.
Делали сцену много больше того, что видно в окне. Окно сцена - играло роль камеры, через которую мы смотрим на игровой мир.
То есть Коди игрок движется, и камера следует за ним..

Одним словом сам Phaser3 это такая интересная тема, что конечно я и после курса продолжу его изучать самостоятельно.
Пока продолжаю по официальным урокам от разработчиков. И замечаю именно те детали, которые в нашем курсе были упущены или не акцентировалось наше внимание на них.
Например правильная рефракция кода.
Нас обучали настройке разных сцен. Но уже тогда, основываясь на моем опыте работы в Unity с С# - я отмечала, что не хватает инкапсуляции... то есть вместо простынь кода, где смешались и "кони и люди", стоило бы отцепить некоторые сложные функции например создающие врагов и описывающие их поведение - в отдельный класс " Враги". На отдельном документе. А потом в коде игрового менеджера  импортировать в активную сцену игры.

Так мы делали в Unity, и это хорошая практика. И код легче читать, понимая где что и на каком файлике.
То есть враг - описан в одном файле, который лежит отдельно. Это отдельный класс, создающий объекты - экземпляры врагов.
В нем могут быть прописаны все виды врагов и их модели поведения. А в игровую сцену, в зависимости от уровня, мы импортируем ( создаем ссылку на класс) врагов, и лепим тех, что нам нужны из описанных в классе.

Либо для каждого вида врагов лепить общий класс и от него производные - типа летающий враг, патрулирующий враг и т.д.

Как говорится в лучших традициях абстрактного ооп.( объектно ориентированного программирования).

Одним словом очень вдохновляет продолжать. И конечно простенькие игры по официальным урокам от разработчиков я уже леплю..


Ну а на Кодакадемии продолжаю фронт энд.

Мы сейчас учим валидацию веб форм и добавление персонализированных опций с помощью джаваскрипт.


Игрушки и те проекты что мы создавали обучаясь игроделию - постепенно буду добавлять на гит портфолио. Времени просто не хватает.

Они вполне играбельные, но конечно сами по себе это не игры. А заготовки к ним..
То есть герой бегает, прыгает сцены меняются..

Из играбельных - по уроку уже от разрабов делали платформер где герой, похожий на Чиполино бегает и собирает звезды, падающие с небес.
Как собирет всю группу выпавших звезд,  падает навая звездная группа. А вместе с ней, незримый недоброжелатель ( кара господня ;) ) выпускает одну бомбочку.
Бомбочка словно резиновая, отскакивает от платформ и земли и краев окна.. и постоянно скачет.
Герою надо собирать рассыпанные звезды и не подхватить саму бомбу. Не дать себя задеть.
И каждый раз, как он собирает всю группу рассыпанных звезд - добавляется еще бомбочка к уже существующей. То есть бомбы сами по себе не исчезают. А множатся с каждым раундом.
За собранные звезды начисляются очки. Задача игрока собрать больше очков, до тех пор пока он на бомбе не подорвется..
Простенькая игрушка, но довольно приятная )) и конечно отличная проктика и опыт для начинающих программистов на Фазере3.

А сейчас нашла там пример разработки RPG, в силе старых версий Final Fantasy ..
Обязательно пройду этот урок. Это то, что я искала..
Конечно хотелось бы action rpg а не пошаговой боевки, с выбором типа атаки и нажатием на кнопочку... но например Pilars of Ethernity весь на такой боевке сделан. И первые два Fallout тоже. И есть люли, которые и сейчас серьезно играют, выискивая лучшую стратегию и метод прокачки героя..
Так что, тоже вещь пользующаяся спросом, вызывающая интерес.
Жаль только что игпы эти - веб. То есть не где хранить сохранения например, кроме как на сервере, где игра залита. А это конечно не удобно..
Но код всегда можно перенести на серьезный движок, и сделать версию stand alone, чтоб играть стационарно на компьютере.. если вдруг что то такое достойное получится.
Игры веб это такие краткометражки. Часто видела, что на сервере сохраняют всего несколько лучших результата.. это же не MMO типа линейки Lineage2, чтоб полностью сервер отдать под юзеров-игроков..
Либо микро игры на Facebok... да Phaser полностью отвечает требованиям по интеграции фейсбуковых microgames...правда меня эта тема не интересует. Не люблю FB.

И да Phase3 совершенно бесплатен. Под лицензией MIT, с открытым исходным кодом.

Думаю, создавая веб портфолио в виде сайта -( это конкурсный проект в CodeCademy),  добавлю игрушку в страницу, чтоб прямо с главной можно было потестить хотя бы одну игру.
В отличие от веб страниц, примеров сайтов - на которые нужно переходить - окно игры созданной на Phaser можно встраивать напрямую в веб страницу.. соответственно стилю прописанному в CSS файле, общему для всего сайта.
Это круто на мой взгляд. Чтоб играть нужно только ткнуть мышкой в окно игры.. ну или пальцем, если вы с гаджета.
Игры конечно не все под гаджеты рассчитаны. Но это уже отдельная спецификация, создание игр на гаджеты, Android, iOS... пока не вникала в это.

Как минимум огне игру можно так встроить..  на остальные примеры - дать ссылки.
« Последнее редактирование: 05 ноября 2023, 19:46:12 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #112 : 07 ноября 2023, 08:32:14 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

по уроку уже от разрабов делали платформер где герой, похожий на Чиполино бегает и собирает звезды, падающие с небес.
Как собирет всю группу выпавших звезд,  падает навая звездная группа. А вместе с ней, незримый недоброжелатель ( кара господня  ) выпускает одну бомбочку.
Бомбочка словно резиновая, отскакивает от платформ и земли и краев окна.. и постоянно скачет.
Герою надо собирать рассыпанные звезды и не подхватить саму бомбу. Не дать себя задеть.
И каждый раз, как он собирает всю группу рассыпанных звезд - добавляется еще бомбочка к уже существующей. То есть бомбы сами по себе не исчезают. А множатся с каждым раундом.
За собранные звезды начисляются очки. Задача игрока собрать больше очков, до тех пор пока он на бомбе не подорвется..
Простенькая игрушка, но довольно приятная )) и конечно отличная проктика и опыт для начинающих программистов на Фазере3.


*ЗВЕЗДЫ*

Оригинальная страница урока
русская версия урока - тут:
https://yocton.ru/phaser3/sozdanie-vashei-pervoi-igry-v-phaser-3


"Добро пожаловать на наш первый урок по созданию игры с помощью Phaser 3. Здесь мы научимся создавать небольшую игру, в которой игрок бегает и прыгает по платформам, собирает звезды и избегает злодеев. В ходе этого процесса мы объясним некоторые основные функции платформы."


Готовая игра тут, Можно поиграть, потестить. Управление стрелками. Прыжок - стрелка Вверх или Пробел:

https://mtapirina.github.io/stars_phaser3_tutorial/

Файлы проектана Github:

https://github.com/mtapirina/stars_phaser3_tutorial


* tutorial_header.png (9.37 Кб, 670x300 - просмотрено 40 раз.)

* Снимок экрана 2023-11-07 в 06.37.16.png (37.5 Кб, 546x616 - просмотрено 35 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #113 : 07 ноября 2023, 12:19:33 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Готовая игра тут, Можно поиграть, потестить. Управление стрелками. Прыжок - стрелка Вверх или Пробел:

https://mtapirina.github.io/stars_phaser3_tutorial/

Файлы проектана Github:

https://github.com/mtapirina/stars_phaser3_tutorial

Игру мне пришлось делать 2 раза. Первая, по ссылкам выше - сделана на "старой версии" джаваскрипт. И сам скрипт - был вписан в index.html страницу. По сути одна большая портянка.
И это немного удручало. В  КодАкадемии мы и то, файлы со скриптом отдельно писали, не смешивая коней и людей, образно говоря.

Но на мое удивление был найден в том же источнике (на русском языке)- обновленный вариант, той же игры, но на "современном" джаваскрипт.
Создание вашей первой игры Phaser 3 на современном Javascript

Да, надо отметить, что раньше в джаваскрипт просто не было понятия о классах. А потом их добавили. И конечно, с классами можно проделывать те же штуки, что и с С#, по сути джаваскрипт приблизилась к ООП.

То есть все те деления и расчленения кода на фракции, с одной точкой "входа" - одним только файлом, прикрепленныым к index.html, а не целой связкой всего, что у вас наскрипчено.

В этом уроке прибегают к использованию упаковщика Vite.js, который вам и нужные плагины подгрузит, и потом общую сборку и ужатие проекта (оптимизацию) сделает.
Вообще то эта штука - сделана для фронт энд разработки. А не конкретно для Phaser3  или игроделия.
Он удобен разработчикам веб страниц и веб приложений.
То есть он мне пригодится и для основной темы, которую я изучаю - фронт энда.

Как я ни кляла некогда терминал - мои возмущения касались работы через терминал с Git и Github
Git  и тошнота...
- на практике - это довольно не удобная штука. Но с использованием npm  все меняется (так мне удобнее, чем на голом bash с компом общаться).

npm - устанавливается с Node.js
npm (англ. Node Package Manager) — менеджер пакетов, входящий в состав Node.js
С ее помошью можно загружать любые версии того же Node.js, и различные дополнительные библиотеки.
И вот с ее помощью, устанавливается Vite.js
Ох, конечно поначалу я с ним намучалась.. Пока не нашла нормальное подробное (для нубов) объяснение, как по шагам подключить этот Vite.js. И как потом извлекать готовую сборку.

Удобство, которое сразу меня удивило, это то, что вызвав этот самый Vite, с помощью npm в командной строке терминала, прямо в программе разработки - VS Code -- можно выбрав язык, которым я буду пользоваться (джаваскрипт) - за секунду создать папку для веб разработки, шаблон, со всем необходимым для старта!
Там вам вся структура папок, с каким то примером простенькой страницы будет.
Все папочки  и файлы организованы и уже взаимосвязаны между собой. И подключен простенький скрипт..
У вас сразу будет и стартовая страница - index.html , и стиль для страницы - styles.css, и уже вкрученный в стартовую страницу скрипт main.js

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

Например тот же Phaser3 - по умолчанию его нет. Входим основную папку проекта, которую нам создал Vite
Парой слов в терминале npm phaser install - нам добавят в папку с плагинами так же и библиотеку Phaser, со всеми плюшками, которые предоставляют разработчики.

И да, с его помощью, запустив в терминале команду npm run start - вы вызовите лайф сервер, на порту 5000 или 8000... то есть вбив выданную вам строку или нажав прямо на ней (контроль клик) вам откроется веб страница, прямо с вашего компа, и она будет обновляться с каждым внсенным вами изменением. с каждой строчкой кода, которую вы внесете. Для разработчика это просто необходимо.

в терминале это выглядит так :

> phaser3-vite-template@0.0.0 start
> vite


  VITE v3.2.7  ready in 101 ms

  ➜  Local:   http://localhost:8000/
  ➜  Network: http://ххх.ххх.х.хх:8000/



И не нужно пользоваться никакими иными расширениями или плагинами для вашей среды разработки. npm и терминал оказались довольно полезной и прямо таки потрясшей меня вещью..

Зачем все это надо? Ведь в конце концов можно ручками накачать неоходимое или закинуть нужную библиотеку.
И лайв сервер - можно как расширение установить на программу, в которой вы работаете..

Так вот на самом деле это нужно для больших проектов. Или проектов дробленых, состоящих из кучи файлов.

Когда закончив работу над проектом вы вызовите npm run build - вам создадут сборку вашего проекта - оптимизированную версию, и работающую быстрее, чем куча тех файлов, что вы написали в оригинале.

И из сборки убирается все лишнее, что в конечном проекте не используется или не подключено.
Из кучи файлов джаваскрипта вы получите один. Который хрен прочтешь.. так как он написан не для вас.. а для машины..

Поначалу у меня была проблема эту сборку запустить. Сам проект работает, а билд -сборка- только белый экран показывает..В джаваскрипт файле не возможно что то править, так как после сборки -там какая то нечитабельная хрень..
И только потом я нашла в чем дело.. При сборке, все ваши лдаваскрипт файлы компонуются в один. И! внимание! -- у него другое имя.
Программа прикрепляет файл в index.html в виде ссылки,  удалив старую ссылку ( старого файла/файлов более не существует. Он останется у вас в папке проекта, но в сборке его нет.
И вот проблема состояла в том, что ссылку эту надо было немного подправить.. просто поставить впереди ./ перед именем файла.

А потом я скачала с репозитория по ссылке к уроку - (клонировала, тоже через терминал- git clone (enter)- готовый шаблон, именно для Phaser3 + Vite.

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

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

Папки проекта (куча джаваскрипт сцен игры) в оригинале и в сборке (один джаваскрипт с непроизносимым именем и не читабельным для человека кодом)

Файлы оптимизированного проекта тут
https://github.com/mtapirina/phaser3_vite_build
Игрушка так же играется, как и ранее (сылки выше)
https://mtapirina.github.io/phaser3_vite_build/

на картинках:

Оригинальный проект.
Оптимизированный проект.
Нечитабельный новый файл, результат слияния всех файлов джаваскрипт проекта в один.


* original_project.png (67.9 Кб, 410x774 - просмотрено 37 раз.)

* npm_vite_build.png (39.69 Кб, 420x416 - просмотрено 86 раз.)

* new_js_file.png (504.46 Кб, 1684x958 - просмотрено 36 раз.)
« Последнее редактирование: 07 ноября 2023, 13:32:05 от Соня (Bruja) » Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #114 : 08 ноября 2023, 11:23:37 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Сделала еще одну игрушку, по уроку найденному в интернете.
Только одно но - она не продуманная какая то.. Если не упасть с платформы, то она не кончается.

(НО вы обязательно с них упадете.. чем дальше, тем кривее сами платформы располагаются! Над этим тоже надо поработать в дальнейшем)

И все бы ничего, но я немного изменила код из учебника, и морковки, которые не собраны.
Ранее, то что не собрано - просто падало вниз, ниже уровня экрана платформы исчезают.
 (и летящие бесконечно  в пропасть морковки, засирают память браузера) -

теперь, после внесенных изменений, уйдя из видимой области экрана - морковки, как и сами платформы - появляются вновь сверху..

То есть больше за экраном ничего не летит в тар-тарары, однако, со временем, этих морковок становится слишком много.
И они кучами покрывают платформы, на которые заяц не наступает и не подбирает их.

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

Тогда он так и подскакивает на месте, но до платформы не долетает. Тут нужен пользователь, кто нажмет пробел или стрелку вверх, чтобы зайка запрыгнул повыше.


Одним словом, с этими наплодившимися морковками надо что то делать.. Лимит им какой то на их количество наложить.

Короче подумаю.. попробую сама довести до ума, прежде чем выкладывать играбельную версию..

ну и да, наверно впервые (или во второй раз) в игру по уроку вкрутили звук -  эффект от подскока зайца..

А вот как звук убавлять прибавлять или отключать вообще - так и не сказали..

Не понимаю вообще, на какой хрен кривые уроки делать?
Не делай да и все.. не парься.


* Снимок экрана 2023-11-08 в 08.51.30.png (140.63 Кб, 954x1290 - просмотрено 31 раз.)

* Снимок экрана 2023-11-08 в 09.27.53.png (129.95 Кб, 742x1168 - просмотрено 27 раз.)
Записан

Соня (Bruja)
Сказочник Пня
Старожил
*****
Online Online

Пол: Женский
Сообщений: 9112


Соня и чумазый Лис


WWW
(перенесённые из темы сообщения тут)
« Ответ #115 : 10 ноября 2023, 17:56:23 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Разбираюсь как цеплятьь сцены и классы друг в друга там где необходимо, что бы игра имела один вход , то есть на html файле была только ссылка на 1 скрипт ( а не список всех классов, которые в ней есть), ну и ссылка на библиотеку phaser.js

Можно и по старинке, но эта портянка на индех.html мерзко смотрится особенно если прицеплено много разных скриптов.. а вам там еще и саму страницу писать.

И разбираюсь, как управлять окном игры с помощью css .. если скрипт ( ссылка на него в стартовом файле страницы index.html ) вставить в <div>, то по идее назначив этому элементу id или класс, из стиля css можно задать размеры или разместить там где удобно, а не в верхнем левом углу ( окно игры там строится по умолчанию) и не в центре и вверху страницы..

Короче так, что бы вверху можно было встроить шапку сайта а в " теле", помимо окна игры еще какой то контент..

Потом буду разбираться с тайлсетами и тайловыми картами...
Тоже та еще трехомудия..

Просто скотство, большая часть обучалок почему то под TypeScript, опять же какая то мутация C#...
А вот на javascript  раз два и обчелся. И в основном на старую версию движка написанные.. а там действительно есть отличия. Ранее в javascript  не было классов.
Короче документ скрипта игры строился иначе. А потой писался прямо в html файле.
Сейчас конечно старые способы просто не работают на новом движке версии 3.

Такое чувство, что на js вы просто по умолчанию должны все сами знать и уметь...

Ну или же js объявлена " война"  майкрософтовским ( биллгетсовским) c шарпом..

Ее сносят из всех движков, а теперь и из движка на ней написанном и для нее..

Просто фантастика..
Суки..  нет слов.

Продажние шкуры.
Записан

Pipa
Техник
Старожил
*
Offline Offline

Пол: Женский
Сообщений: 12673



Email
(перенесённые из темы сообщения тут)
« Ответ #116 : 10 ноября 2023, 18:19:02 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Сонь! Пришли мне на почту какую-нибудь html-страницу (js можно отдельно), чтобы на ней что-то при просмотре через обычный браузер двигалось/играло. А я ее потом в эту тему вставлю. А то форум сопротивляется вставке в него html-файлов качестве вложений.
Записан
Werter
Постоялец
***
Offline Offline

Пол: Мужской
Сообщений: 1807



(перенесённые из темы сообщения тут)
« Ответ #117 : 10 ноября 2023, 21:10:54 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Чистый JavaScript сейчас почти не применяется в коммерческой разработке. Рулят его производные: Реакт и Ангуляр для фронта, Нода для бэка, Тайпскрипт - если нужна строгая типизация. А она нужна, если ты пишешь что-то больше одностраничного сайта.
 А стили удобнее всего выносить в отдельный файл с расширением .css и подключать их через классы. Более продвинутый способ - через конструкции Реакта, там в одной строке идет код, подобный тегам html и классам css.
 В общем, изучение ДжаваСкрипт это шанс получить шанс на изучение его модификаций.
Записан
Pipa
Техник
Старожил
*
Offline Offline

Пол: Женский
Сообщений: 12673



Email
(перенесённые из темы сообщения тут)
« Ответ #118 : 10 ноября 2023, 22:51:44 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Чистый JavaScript сейчас почти не применяется в коммерческой разработке. Рулят его производные: Реакт и Ангуляр для фронта, Нода для бэка, Тайпскрипт - если нужна строгая типизация.

     Дык на чистом JavaScript едва ли кто пишет. Сфера применения JavaScript - "оживление" HTML-страниц. И тут ему нет равных, но не столько потому, что как язык он уж так хорош, сколько потому, что его все интернет-бразузеры поддерживают (его скрипт понимают и выполняют). Например, в описании моего любимого :) Firefox'a так и сказано:
Цитата:
JavaScript - это стандартный язык программирования, который может быть включён в веб-странички, чтобы обеспечить работу таких возможностей как меню, звуки и другие интерактивные элементы. По-умолчанию в обозревателе Firefox разрешено использовать сценарии JavaScript и устанавливать какие-либо дополнительные элементы не требуется.
Аналогичная картина и в других на интернет-браузерах.
Записан
Werter
Постоялец
***
Offline Offline

Пол: Мужской
Сообщений: 1807



(перенесённые из темы сообщения тут)
« Ответ #119 : 10 ноября 2023, 23:15:10 »
Цитировать выделенноеЦитировать выделенное ПроцитироватьЦитировать

Pipa, у вас слегка устаревшие сведения. ДжаваСкрипт давно уже перерос скриптование браузеров, для чего его создала компания Нетскейп, которую доконал Майкрософт, но сотрудники которой создали Мозиллу и крепко подпортили бизнес Майкрософту и другим айти гигантам тем, что создали движ с открытым исходным кодом.

 ДжаваСкрипт на сегодня второй по популярности язык программирования (после Пайтона) и он благополучно осваивает не только веб, но и практически все ниши современного айти, за исключением, разве что, больших корпоративных энтрепрайз программ.
Записан
Страниц: 1 ... 6 7 [8] 9 10 ... 23  Все
  Ответ  |  Печать  
 
Перейти в:        Главная

+ Быстрый ответ
Postnagualism © 2010. Все права защищены и охраняются законом.
Материалы, размещенные на сайте, принадлежат их владельцам.
При использовании любого материала с данного сайта в печатных или интернет изданиях, ссылка на оригинал обязательна.
Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC