Я участвую в творческом конкурсе «Праздник середины осени».Творческий конкурс «Праздник середины осени»

Торт Бо (торт с постскриптумом) - это традиционное мероприятие Праздника середины осени, которое зародилось в Сямэне, провинция Фуцзянь, а затем распространилось наЮжная Фуцзянь. Начиная с ранней династии Цин, он был изобретен Чжэн Чэнгун, когда он размещал свои войска, чтобы облегчить солдатам чувства Акации середины осени и поднять боевой дух. В результате это передавалось из поколения в поколение и сегодня стало уникальным народным обычаем в южной провинции Фуцзянь.

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

Сегодня я поделюсь с вами, как быстро за полчаса разработать 3D игру-торт. Первый опыт конечного эффекта

Шаг 1 Подготовка

Инструменты разработки

Мы используем CocosCreator для разработки DEMO.CocosCreator — отличный отечественный движок для разработки игр, который только что выпустил версию 3.3. Сначала скачиваем последнюю версию CocosCreator на официальном сайтеCocosCreator3.3

После загрузки откройте новый пустой 3D-проект:

Ресурсы

Нам нужна 3D модель игральной кости и чаши, вы можете перейти на sketchfab и выполнить поиск по ключевым словам Dice, bowl, чтобы найти бесплатную модель, которая вам нравится.

CocosCreator в настоящее время поддерживает два формата GLTF/FBX, вы можете выбрать любой из них для загрузки.

звуковой ресурс

Нам нужна фоновая музыка, кошачий звук, выиграв / нет звука уведомления. Вот очень хорошая иностранная музыка / звукового эффекта рекомендуетсяwww.epidemicsound.com/Хотя большинство звуковых эффектов платные, мы можем получить адрес файла через сетевой запрос (этот сайт более добросовестный и не зашифрованный)

Шаг 2. Создайте сцену

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

Найдите параметры материала на панели свойств справа, настройте цвет материала, прочность металла, шероховатость и т. д., чтобы сделать модель более текстурированной.

Чтобы сделать работу материала более реалистичной, мы добавляем скайбокс и отмечаем опцию useIBL, и материал имеет эффект отражения окружающей среды:

Ресурсы скайбокса:

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

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

Затем вставьте модель кости в сцену и настройте свойства материала, чтобы сделать модель более текстурированной.

Добавьте твердые тела и коллайдеры к кубикам (кубики динамические, выберите Dynamic в качестве типа твердого тела)

Пока сцена построена, запустите ее, чтобы увидеть эффект:

шаг.3 Логика игры

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

Откройте Main.ts, добавьте простые интерактивные операции, щелкните экран, чтобы зафиксировать кости над чашей, перетащите экран, чтобы переместить кости, и отпустите, чтобы разместить кости:

@property(Node)
public dices: Node = null;
start () {
        this.dice = this.dices.children; // 保存获取到的6个骰子节点
        systemEvent.on(SystemEvent.EventType.TOUCH_START, this.onTouchStart, this);
        systemEvent.on(SystemEvent.EventType.TOUCH_MOVE, this.onTouchMove, this);
        systemEvent.on(SystemEvent.EventType.TOUCH_END, this.onTouchEnd, this);
}
onTouchStart (e) {
    for (let i = 0; i < this.dice.length; i++) {
        let dice = this.dice[i];
        let rb = dice.getComponent(RigidBody); // 遍历骰子节点，获取节点上的刚体组件
        rb.setLinearVelocity(new Vec3(0,0,0)); // 把刚体的速度设置为0
        setTimeout(() => {
            rb.type = ERigidBodyType.KINEMATIC; 
            // 把刚体类型设置为运动学刚体，动态刚体不能通过脚本干预运动方式，在操控骰子时要先把刚体类型设置为KINEMATIC
        }, 0);
        // 刚体类型修改在当前帧不生效，所以加了个setTimeout强制在下一帧执行
        dice.setPosition(dice.position.x, 3, dice.position.z); //只改变Y的值，骰子定位到正上方
    }
}
onTouchMove (e) {
    // 拖拽骰子
    var delta = e.getDelta();
    for (var i = 0; i < this.dice.length; i++) {
        let dice = this.dice[i];
        dice.setPosition(dice.position.x - delta.y / 200, 3, dice.position.z - delta.x / 200);
    }
}
onTouchEnd () {
    // 释放骰子，并加上一个随机的速度和角速度冲量
    for (var i = 0; i < this.dice.length; i++) {
        let dice = this.dice[i];
        let rb = dice.getComponent(RigidBody);
        setTimeout(() => {
            let r = (Math.random() - 0.5) * this.power;
            let ry = -(Math.random() + 0.2) * this.power;
            let rt = (Math.random() - 0.5) * this.power * 20;
            rb.type = ERigidBodyType.DYNAMIC;  // 将RigidBody设置回动态
            rb.applyImpulse(new Vec3(r, ry, r), new Vec3(0,0,0));
            rb.applyTorque(new Vec3(rt, rt, rt));
        }, 0);
    }
}

Запустите, чтобы увидеть эффект:

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

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

шаг 4 идеальные детали

Нет души без звуковых эффектов.При столкновении игральных костей с чашей добавляется звуковой эффект удара.Вот небольшая деталь.Громкость звукового эффекта должна динамически регулироваться в соответствии с силой удара.Кучи кости сталкиваются на высокой скорости, и звуковые эффекты будут более сложными. Ключевой код:

start () {
    this.rb = this.getComponent(RigidBody);
    this.vel = new Vec3(0,0,0);
    let Cld = this.getComponent(Collider);
    Cld.on('onCollisionEnter', this.onCollision, this); // 碰撞事件监听
}
private onCollision (event: ICollisionEvent) {
    let curTime = new Date().getTime();
    if (curTime - this.lastTime > 50) {
        // 过渡50ms内的连续碰撞
        this.rb.getLinearVelocity(this.vel); // 获取碰撞时刚体的相对速度
        this.audioSource.volume = Math.pow(Vec3.len(this.vel), 2) / 100; //根据相对速度设置音量
        this.audioSource.play();
    }
    this.lastTime = curTime;
}

Наконец, улучшите некоторые детали оперативных подсказок, и демонстрация торта Бо завершена.

финальная ДЕМО-демо

настольная версия: Праздничный торт середины осени 3D

Версия Н5:

Have fun!