введение
Если вы ничего не знаете о белой цапе, я предлагаю вам взглянуть на вводный урок, который я написал ранее (Вводный урок для белой цапли, который можно увидеть с первого взгляда).如果你了解一点，那就让我们愉快地开车吧🚗🚗🚗。
идеи игр
Общую разработку игры можно условно разделить на следующие четыре этапа, в основном для игр H5:
первый шаг:
Подготовьте ресурсы. Об этой части сказать нечего, просто подготовьте материал 🤷♀️🤷♂️, обычно фото и аудио. Материалы, используемые в текущем проекте Jump Jump (как показано на рисунке ниже):Следует отметить одну вещь: тень коробки здесь только притворяется, что имеет 3D-эффект, но на самом деле является изображением. При написании кода точкой привязки изображения блока должна быть не центральная точка изображения, а центр блока на изображении.
Шаг 2:
Напишите игровые сцены. Что такое сцена, на самом деле это UI-интерфейс. Как правило, мы можем разделить игру на (как минимум) 3 сцены, а именно начальную сцену, игровую сцену и конечную сцену (как показано на рисунке ниже). Затем, используя функцию EUI (визуальный макет) цапли, мы можем легко создавать статические сцены (с пониманием сцены), не написав ни строчки кода (счастливые 😄), интерфейс есть, это действительно просто, кто использует знания! 🎉🎉🎉Совет: статические сцены — это те вещи, которые не двигаются; движущиеся или повторяющиеся объекты обычно записываются позже как класс или метод.
третий шаг:
Напишите логику игры. Эта часть является ядром игры, и здесь разница между людьми😢. Вообще говоря, между первой и двумя последними сценами меньше взаимодействия, пока к кнопке добавлено несколько обработчиков событий, а логика в игровой сцене — это то, где нам действительно нужно показать свои таланты (написать баги).
четвертый шаг:
Играйте и отлаживайте больше. Об этом шаге говорить больше не нужно, просто еще немного, всякие дерзкие операции, комплексный подход, баги всегда могут неожиданно встретить вас, и искры, которые никогда не покидают вас.
Новый проект
Без лишних слов, давайте покатаемся на лошадях (сказал гонять 😂)!
1. Создайте новый проект с именем jump и откройте его в редакторе Egret Wing 3.
2. Вresource/assetsСоздайте новый в каталогеdataпапку и поместить в нее ресурсы (включая изображения и аудио)
3. Открытьsrcв каталогеMain.tsфайл, удалитьcreateGameSceneсодержание функцииЕсли вы запустите его в этот момент, вы не увидите никакого эффекта, потому что
createGameSceneФункция ничего не делает.
Пишите статические сцены
Этот шаг мы выполним через EUI, не нужно писать ни строчки кода, вор ТМ классный. первый вsrcСоздайте новый каталог с именемscene, щелкните папку правой кнопкой мыши, чтобы создать новый компонент EUI, назовите его SceneBegin и измените путь по умолчанию (он сам создаст каталог), как показано на следующем рисунке:
Из приведенного выше рисунка видно, что после нового компонента EUI будут сгенерированы два файла, один
exmlфайл, одинtsфайлы, они находятся во взаимном соответствии. вexmlИспользуется для написания пользовательского интерфейса,tsЛогика, используемая для написания соответствующей страницы. Итак, на этом шаге мы перейдем только кexmlдокумент.
ОткрытьSceneBegin.exml, щелкните прозрачную область посередине и установите ее ширину и высоту справа на 640 ✖ ️1136. Конкретная операция выглядит следующим образом:Нажмите на панель ресурсов в левом интерфейсе (на значке есть буква E), выберите фон из него и перетащите его в интерфейс, а затем нажмите последнюю кнопку ограничения ярлыка на правой панели, чтобы фон покрыл весь интерфейс.Операция выглядит следующим образом:
Нажмите на панель компонентов в левом интерфейсе (значок немного похож на головоломку) и выберите из нее
Buttonкомпонента, добавьте имя идентификатора и замените скин компонента (то есть фон кнопки), конкретная операция выглядит следующим образом:
Таким образом, мы написали стартовую сцену, как насчет этого, не правда ли легко?
Затем точно так же напишите сцену игры и финальную сцену. Поскольку конечный интерфейс здесь покрыт игровым интерфейсом в виде маркерного слоя, они написаны вместе. хорошо, нечего сказать, щелкните правой кнопкой мышиsrcв каталогеsceneпапку, создайте еще один компонент EUI и назовите его SceneGame. Поскольку две сцены пишутся вместе, нам нужно их сгруппировать (Group),ОдинGroupписать игровые сцены,GroupНапишите финальную сцену. Потом как сгруппировать тоже очень просто, найдите панель раскладки в левом нижнем углу редактора, и установитеGroupПеретащите его в интерфейс и адаптируйте на весь экран, как показано ниже:Затем вы можете нарисовать совок в соответствии с тыквой, конкретной
exmlРендеринг файла выглядит следующим образом:
Открой сейчас
srcв каталогеMain.tsФайл иcreateGameSceneДобавьте стартовую сцену на сцену в функции, а затем запустите ее, чтобы увидеть стартовый интерфейс.Конкретный код выглядит следующим образом:
protected createGameScene(): void {
this.addChild(new SceneBegin());
}
резюме
Пока все наши статичные сцены написаны, о нет 😯, мы не писали код, только стикеры и тексты. Суть его заключается в том, чтобы перетаскивать, умело перетаскивать ресурсы или элементы управления из левой панели в интерфейс, а затем задавать его свойства (ширину и высоту или значения xy и т. д.) на правой панели, пока можно двигать мышкой умело (уверяю вас С сильной правой рукой💪), статичные сцены Shenma не проблема.
На самом деле, в этой статье не так много контента, которым можно было бы поделиться, но статья будет слишком длинной, чтобы писать ее дальше, и всем неинтересно ее читать, поэтому я напишу ее в двух частях. ключевой момент 🀄️), полный галантереи, с нетерпением жду вашего чтения, увидимся позже 👋👋👋.
Перейти к исходному адресу:GitHub.com/Lugouqiao627628/О…