美文网首页
使用CocosCreator发布到Web平台,并部署到外网

使用CocosCreator发布到Web平台,并部署到外网

作者: 全新的饭 | 来源:发表于2022-09-26 18:19 被阅读0次
  1. 在CocosCreator中创建一个工程并打包(Platform=WebMobile),获得一个有如下文件内容的目录。


    image.png
  2. 创建一个github仓库,将上述内容传到仓库中。
  3. 通过app.netlify.com发布。
    image.png
    选择上一步的github仓库后,直接点下一页的
    image.png
    部署完成,可以获得一个链接:https://illustrious-druid-142c3f.netlify.app/
    点击它即可访问通过CocosCreator打包的内容。

之后每次更新内容时,重新打包上传到github仓库就行,不需再重新部署。

额外知识

该测试内容中使用到的代码:获取窗口Size、点击处坐标、转为世界坐标……

import { _decorator, Component, Node, Label, screen, Vec2, Vec3, EventTouch, input, Input, Camera } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('DisplaySize')
export class DisplaySize extends Component 
{
    @property({ type: Label, visible: true, displayName:'窗口Size'})
    private _screenSizeLabel: Label;
    private _screenSize: Vec2;
    @property({ type: Label, visible: true, displayName: '点击位置' })
    private _clickPosInfoLabel: Label;
    @property({ type: Camera, visible: true, displayName: '相机' })
    private _cam: Camera;
    @property({ type: Node, visible: true, displayName: '标识物' })
    private _worldNode: Node;

    start()
    {
        this.init();
    }

    onDestroy()
    { 
        this.myDestroy();
    }

    update(deltaTime: number)
    {
        
    }
    
    private init(): void
    {
        this.displayScreenSize();
        input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
    }
    
    private myDestroy(): void
    { 
        input.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
    }

    private displayScreenSize(): void
    { 
        const windowSize = screen.windowSize;
        this._screenSize = new Vec2(windowSize.width, windowSize.height);
        this._screenSizeLabel.string = `屏幕大小:${this._screenSize.x.toFixed()}x${this._screenSize.y.toFixed()}`;
    }

    private onTouchStart(event: EventTouch)
    { 
        const pos = event.getLocation();
        const ratio = new Vec2(pos.x / this._screenSize.x * 100, pos.y / this._screenSize.y * 100);
        this._clickPosInfoLabel.string = `点击处:${ratio.x.toFixed()}%x${ratio.y.toFixed()}%`;


        let worldPos: Vec3;
        let cPosZ = this._cam.node.worldPosition.z / 1000;

        worldPos = this._cam.screenToWorld(new Vec3(pos.x, pos.y, cPosZ));
        this._worldNode.setPosition(worldPos);
    }
}

相关文章

网友评论

      本文标题:使用CocosCreator发布到Web平台,并部署到外网

      本文链接:https://www.haomeiwen.com/subject/ebrxartx.html