Введение в Cocos Creator - игры с перетаскиванием (1)

внешний интерфейс Visual Studio Code Canvas

предисловие

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

[] Настоятельно рекомендуется для начинающих прочитать первый официальный документ. Который также содержит много демонстрации.

Официальный адрес документа:docs.cocos.com/creator/полный….

Сегодня я познакомлю вас с кратким введением в процесс разработки Cocos Creator.

~~~ Теперь давайте завершим простую игру с перетаскиванием.

полный код

GitHub.com/тао любит улыбку/…

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

  1. Cocos Creator
  2. Visual Studio Code

Адрес документации по конфигурации Visual Studio Codedocs.cocos.com/creator/полный…

текст

1. Создайте новый проект с помощью Cocos Creator.

2. Создайте сцену в активах и назовите ее «Перетаскивание».

3. Дважды щелкните нашу сцену.

4. Подготовьте фотоматериал и поместите его в активы.

5. Перетащите материал в диспетчер иерархии и поместите его под узел Canvas.

6. Создайте js-файл

7. Добавьте js на сцену

8. Открываем наш проект с помощью Visual Studio Code

9. Напишите скрипт и добавьте свойство carNode в свойства

***
properties: {
    carNode: {
        type: cc.Node,
        default: null
    }
},
***

10. Вернитесь в Cocos Creator и обнаружите, что только что добавленное вами свойство появилось в редакторе.

11. Перетащите узел автомобиля на позицию значения атрибута.

12. Вернитесь к Visual Studio Code для автомобиля.узелДобавить событие перетаскивания

***
onLoad () {
    //获取小车节点
    let { carNode } = this;
    //添加变量判断用户当前鼠标是不是处于按下状态
    let mouseDown = false;
    //当用户点击的时候记录鼠标点击状态
    carNode.on(cc.Node.EventType.MOUSE_DOWN, (event)=>{
        mouseDown = true;
    });
    //只有当用户鼠标按下才能拖拽
    carNode.on(cc.Node.EventType.MOUSE_MOVE, (event)=>{
        if(!mouseDown) return;
        //获取鼠标距离上一次点的信息
        let delta = event.getDelta();
        //移动小车节点
        carNode.x = carNode.x + delta.x;
        carNode.y = carNode.y + delta.y;
    });
    //当鼠标抬起的时候恢复状态
    carNode.on(cc.Node.EventType.MOUSE_UP, (event)=>{
        mouseDown = false;
    });
},
***

13. Вернитесь в Cocos Creator, нажмите кнопку «Выполнить», Cocos Creator поможет вам открыть браузер и загрузить текущую игру.

14. Попробуйте перетащить машину, чтобы увидеть, может ли она двигаться.

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

***
onLoad () {
    //获取小车节点
    let { carNode } = this;
    //添加变量判断用户当前鼠标是不是处于按下状态
    let mouseDown = false;
    //当用户点击的时候记录鼠标点击状态
    carNode.on(cc.Node.EventType.MOUSE_DOWN, (event)=>{
        mouseDown = true;
    });
    //只有当用户鼠标按下才能拖拽
    carNode.on(cc.Node.EventType.MOUSE_MOVE, (event)=>{
        if(!mouseDown) return;
        //获取鼠标距离上一次点的信息
        let delta = event.getDelta();
        //增加限定条件
        let minX = -carNode.parent.width / 2 + carNode.width / 2;
        let maxX = carNode.parent.width / 2 - carNode.width / 2;
        let minY = -carNode.parent.height / 2 + carNode.height / 2;
        let maxY = carNode.parent.height / 2 - carNode.height / 2;
        let moveX = carNode.x + delta.x;
        let moveY = carNode.y + delta.y;
        //控制移动范围
        if(moveX < minX){
            moveX = minX;
        }else if(moveX > maxX){
            moveX = maxX;
        }
        if(moveY < minY){
            moveY = minY;
        }else if(moveY > maxY){
            moveY = maxY;
        }
        //移动小车节点
        carNode.x = moveX;
        carNode.y = moveY;
    });
    //当鼠标抬起的时候恢复状态
    carNode.on(cc.Node.EventType.MOUSE_UP, (event)=>{
        mouseDown = false;
    });
},
***

16. Вернитесь в Cocos Creator и нажмите кнопку «Обновить», а затем попробуйте еще раз, чтобы увидеть, можно ли перетаскивать машину только по экрану.

будь осторожен

  1. Если вы хотите увидеть рендеринг на своем телефоне, вам нужно изменить соответствующие события мыши на сенсорные события.

by:Tao

Категории