美文网首页
使用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