Легко читаемый вводный учебник по цапле

игра
Легко читаемый вводный учебник по цапле

что такое белая цапля

Egret - это инструмент, который поможет вам разработать игры H5. Может быть, вы написали несколько небольших игр с родным js, но эффективность крайне низкая; вы также написали с createjs, но это слишком сложно делать то, что вы хотите. В это время нам нужно научиться использовать передовые инструменты 💪 ( Egret). Его внешность значительно освобождает ваши руки, и может помочь вам развить небольшую игру и быстрее (кто это использует, кто знает 😋). Здесь нет сравнения с другими игровыми двигателями здесь. Эта вещь похожа на реагирование и Vue. Неважно, какой из них вы выберете, вы можете использовать один из них.

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

Таким образом, эта статья направлена ​​на то, чтобы помочь вам как можно быстрее понять egret и создать свой собственный проект, рассказать вам о некоторых вещах, которые вы должны освоить, чтобы начать работу, и вы можете медленно просмотреть документацию для остального. . . ок👌, поезд отправляется🚗🚗🚗. .

Официальный адрес документа:Сайт developer.egret.com/talent/docs/ просканирован…

Подготовка среды (не думайте, насколько высок этот шаг, на самом деле это просто загрузка)

Шаг 1: Сначала загрузите все, просто нажмите на ссылку ниже, чтобы загрузить, а затем установить.
Инструмент управления библиотекой движка EgretLauncher:woohoo.egret.com/products/эм…

Шаг 2: Откройте EgretLauncher, переключитесь на панель движка и щелкните последнюю стабильную версию движка для загрузки, как показано ниже:

Шаг 3: Переключитесь на панель инструментов, нажмите, чтобы установить Egret Wing 3 (редактор), для этого может потребоваться вход в учетную запись, если нет, зарегистрируйтесь, конечно, если вы также можете установить другие инструменты самостоятельно, просто нажмите, Но хлопотно учиться.

Быстро создать проект

Ну, это все, что вам нужно скачать. Теперь мы создадим собственный проект так быстро, как только сможем. Откройте EgretLauncher, перейдите на панель проекта, нажмите «Создать проект», появится диалоговое окно, введите имя проекта, выберите адрес проекта, выберите fixedWidth для режима масштабирования (мини-игры не поддерживают режим адаптации showAll, рекомендуется fixedWidth), остальные остаются без изменений, нажмите «Создать» в правом нижнем углу. Такой проект рождается (точно так же, как vue init инициализирует проект).

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

На этом проект создан, и туториал закончен (этот человек заслуживает того, чтобы его избили 😠😠😠).
Далее я объясню два часто используемых каталога в проекте (на самом деле, многие вещи нам не нужны, и они очень похожи на vue). Лично я считаю, что написание игр, сцен и логика являются наиболее важными. Самое главное в сцене — это ресурс, который отражается в папке ресурсов, а логика — в папке src. Давайте сначала поговорим о каталоге ресурсов.

каталог ресурсов

Как показано на рисунке выше, эта папка в основном используется для хранения всех используемых в проекте ресурсов (то есть аудио, видео и картинок и т. д.), нам нужно только перетащить или скопировать в папку используемые материалы , а другие не должны быть Не волнуйтесь, цапля справилась с этим за нас. Если ресурсов слишком много, вы можете создать еще несколько папок в каталоге ресурсов, чтобы классифицировать их, что будет понятнее. Следует отметить, что имя ресурса должно быть уникальным, потому что в итоге мы все читаем ресурс одинаково (то есть один и тот же апи,RES.getRes('resourceName'), где параметр — это имя ресурса).

Что касается синей части на приведенном выше рисунке, это некоторые общие компоненты (например, кнопки), такие как введение компонента element в vue. Но есть большая разница, что это игра.Как правило, игры будут иметь свой уникальный дизайн.Эти встроенные компоненты не очень нужны.Если утрировать,если ваша игра написана со своими компонентами,Стиль каждой игры то же, как привлечь внимание игроков? Таким образом, вы можете просто взглянуть на эти встроенные компоненты, а затем удалить их или игнорировать, это все равно не нужно.

а потомdefault.res.jsonЭтот файл, теперь вам просто нужно знать, что это некоторое описание всех ресурсов, которые мы импортировали, не беспокойтесь об этом слишком сильно.

каталог src

В этой директории еще проще, нужно обращать внимание только на входной файл Main.ts, а остальные файлы игнорировать, по крайней мере, я не трогал эти файлы с тех пор, как написал две-три демки игр 🤷‍♀️🤷‍ ♂️.

Как показано на рисунке выше, нам нужно посмотреть только на два основных шага операции в этом файле. Один из них — загрузка ресурсов (на самом деле его можно оставить в покое, потому что его не нужно трогать при написании кода, но нужно в нем разбираться). Другой — это то, куда мы на самом деле смотрим и где мы на самом деле пишем код. существуетcreateGameSceneЭтот метод в основном предназначен для добавления некоторых элементов (таких как фон, прямоугольники, значки и тексты и т. д.) на экран. Как показано на рисунке ниже, использование очень похоже на createjs (библиотека холста, такая как jQuery для js): сначала нужно создать новую вещь, затем установить различные свойства и, наконец, добавить ее в контейнер или сцену. Наверное такая мысль.Конечно, если логика игры сложная, мы можем создать еще один файл ts в каталоге src для его записи, если логики меньше, то можно написать ее прямо в этой функции. С egret вам не нужно беспокоиться о том, как загружаются и обрабатываются ресурсы (аплодисменты 👏👏👏), мы просто сосредотачиваемся на написании игровой логики (вcreateGameSceneЭто написано внутри), что значительно снижает нагрузку на разработчиков и является хорошим опытом.

Наиболее часто используемые API (необходимо освоить, другие будут осваиваться медленно)

О тексте

let label:egret.TextField = new egret.TextField(); 
label.text = "hello world!"; 

О картинках

let img:egret.Bitmap = new egret.Bitmap();
img.texture = RES.getRes("imgName");

О фигурах

// 画个红色矩形框
let shp:egret.Shape = new egret.Shape();
shp.graphics.beginFill( 0xff0000, 1);
shp.graphics.drawRect( 0, 0, 100, 200 );
shp.graphics.endFill();

о звуке

let sound:egret.Sound = RES.getRes("mp3Name");
sound.play();
sound.stop();

О мероприятии

// 触摸事件(相当于点击)
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);
this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouchTap, this);

О таймере

// 参数为时间间隔(ms)和执行次数
let timer:egret.Timer = new egret.Timer(500, 5); 
// 边计时边触发
timer.addEventListener(egret.TimerEvent.TIMER, this.timerFunc, this);
// 计时结束触发
timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.timerComFunc, this);
// 开始计时
timer.start();
// 暂停计时
timer.stop();
// 重新计时
timer.reset();

О хранении данных

// 存储数据
let key:string = "score";
let value:string = "100";
egret.localStorage.setItem(key, value);
// 读取数据
let score:string = egret.localStorage.getItem(key);
// 移除数据
egret.localStorage.removeItem(key);
// 清除所有数据
egret.localStorage.clear();

Советы

1. Написание кода необходимо разрабатывать с помощью ts (стандартный js).
2. Для игр с цаплями по умолчанию 30 кадров.
3. Большинство API начинаются с egret, а RES используется для чтения ресурсов.
4. Иногда вы меняете код, и он не действует, или вдруг сообщается об ошибке Не паникуйте, попробуйте перезапустить Дафа.
5. Единицей длины являются пиксели.
6. Каждая цапля должна иметь и только одну ступень (то есть предмет сцены). Сцена является наиболее фундаментальным контейнером дисплея в архитектуре дисплея цапли. Начало координат сцены находится в левом верхнем углу.

Эпилог

Выше приведены несколько пунктов знаний, которые вы должны освоить, чтобы изучить движок.Если у вас есть время, рекомендуется просмотреть документ примерно, по крайней мере, вы знаете, что существует, а затем искать документ для чтения и записи, когда вы используете его позже.это тоже хорошо.
Конечно, если просто говорить об этом, а не практиковать фальшивую позу рук, я уже давно придираюсь к тому, что вы, наверное, до сих пор не можете написать, это нормально, и я тоже не буду. просто чтобы дать вам предварительное впечатление о белой цапле.Я свяжусь с вами, я напишу еще несколько руководств по мини-играм (обязательно потренируйтесь в нескольких мини-играх, это ключевой момент), после такого процесса , вы можете написать свои мини-игры (уголки рта поднимаются, когда вы думаете об этом 😏 ).