PlayCanvas（四）__业务逻辑篇

前言

传送门
PlayCanvas（一）__入门篇
 PlayCanvas（二）__EngineSetting篇
 PlayCanvas（三）__进阶篇
 PlayCanvas（五）__商业项目篇
 PlayCanvas（六）__发布篇

正文（持续更新...）

上次说到html和css的形式
这次说一些功能。
官方文档案例

网络通讯

Socket.io

这里用的是Socket.io
引入官方实例中的socket.js脚本

var Network = pc.createScript('network');
// 这样声明是类全局变量
Network.id = null;
Network.socket = null;
//这样声明是游戏全局变量
var test = 10;
// initialize code called once per entity
Network.prototype.initialize = function() {
    var socket = io.connect('https://www.dyfstudy.top:2120'); // 链接服务端
    Network.socket = socket;
    Network.socket.emit("chat message","666776");//chat message 是定义的消息字段 666776是消息内容
    Network.socket.on("chat message from server",function(d){ //chat message from server 是客户端链接成功后，服务器发送的消息字段，d是内容。 
        console.log("链接成功" +d);
    });
};

http

Get

pc.http.get("http://example.com/", function (err, response) {
    console.log(response);
});

Post

post(url, data, callback)
post(url, data, options, callback)

LoadJson

this.loadJsonFromRemote("https://api.github.com/", function (data) {
    // display JSON data from remote server
    el = document.querySelector("#xhr-json");
    el.textContent = JSON.stringify(data, null, 4);
});

Game.prototype.loadJsonFromRemote = function (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", function () {
        callback(JSON.parse(this.response));
    });
    xhr.open("GET", url);
    xhr.send();
};

引入本地Json

这里有一个非常重要的问题，一定要强转一下值，这边转成float，不然会出现好多坑。

HandelControl.attributes.add("stepJsonData",{
    type:"asset",
    assetType: 'json'
});

this.arrayjson = this.stepJsonData.resources;
console.log(parseFloat(this.arrayjson[0].Distance));

[
    {
        "Distance": "21",
        "Yaw": "-31",
        "Pitch": "-41",
        "PosX":"0",
        "PosY":"0",
        "PosZ":"0"
    },
    {
        "Distance": "24",
        "Yaw": "33",
        "Pitch": "-27",
        "PosX":"0",
        "PosY":"0",
        "PosZ":"0"
    }
]

相机调用json

Distance 距离
Yaw y轴旋转角度
Pitch x轴旋转角度
PosX 中心点x轴坐标
PosY 中心点y轴坐标
PosZ 中心点z轴坐标

调用实例

HandelControl.attributes.add("stepJsonData",{
type:"asset",
assetType: 'json'
});
this.arrayjson = this.stepJsonData.resources;
console.log(this.arrayjson[0].Distance);

改变Material颜色

var ModelControl = pc.createScript('modelControl');
ModelControl.attributes.add("ArrayModel",{
    type:"entity",
    max:4,
    array:!0
}); 
ModelControl.attributes.add("materials", {type: "asset", assetType: "material", array: true, title: "Materials"});
ModelControl.prototype.initialize = function()
{  
    //换材质球来改颜色。
    this.ArrayModel[1].model.meshInstances[13].material = material[1].resource;
    //直接改变颜色
    this.ArrayModel[2].model.meshInstances[13].material.diffuse = 
    new pc.Color(0,0,0);
    //改A值，前提是外部的OPACITY的BlendType = Alpha  选A
    this.ArrayModel[2].model.meshInstances[13].material.opacity = 0.7;
    this.ArrayModel[2].model.meshInstances[13].material.update(); 
    //官方改A值
    this.ArrayModel[2].model.meshInstances[13].setParameter("material_opacity",0.7);
};

文本日历循环

本来是用for循环来做的，结果发现闭包了。就改成了setInterval

var con = document.getElementById("button"); 
    con.addEventListener("click",function(){
        self.createCalendar(self.duration); //self是this  duration是外部变量
});
var mouth = 1;
var day = 0;
var residueTime;
var isInput = false;//循环完之前再次点击不触发
InputTest.prototype.createCalendar = function(t)//生成日历
{
    if(!isInput){
        isInput = true;
    var offest = t/365; offest = offest *1000;  //间隔时间
    var con = document.getElementById("counter");  //获取span文本
    var i = 0; //循环次数
    var a = setInterval(function(){ 
            i++;
            mouth = self.GetDate(i); //获取月
            var tempMouth,tempDay;
            tempMouth = mouth<10 ? "0" +mouth : mouth;  
            tempDay = day<10 ? "0" +day : day; 
            con.textContent = tempMouth+"月" + tempDay + "日";  //  console.log(con.textContent);  
            if(i>=365)
            {
                clearInterval(a);
                isInput = false;
            }
        },offest); 
    }
};
InputTest.prototype.GetDate = function(r)//获取日期
{
    residueTime = r;
    if(residueTime <=arrayMouth[0]) //提前设置好的日期每个月多少天
    {
        day = residueTime;
        return 1; //返回一月
    } 
    for(var i = 0;i<12; i++)
    { 
        residueTime = residueTime - arrayMouth[i]; //轮循 
        if(residueTime>0 && residueTime <= arrayMouth[i+1])
        { 
            day = residueTime;
            return i+2; //返回n月   
        }  
    } 
};

判断url值

Commont.GetQueryVariable =function (variable)
{
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
};
实例：http://www.runoob.com/index.php?id=1&image=awesome.jpg
console.log(Commont.GetQueryVariable("id")); 1
console.log(Commont.GetQueryVariable("image"));awesome.jpg

图片自发光

先找一个这样的图片，中心是白色，周围是黑色。
创建材质球，并添加到EMISSIVR，并勾选Color后面的Tint。
前面几个颜色都设置成黑色。
创建一个Plane，并把材质球给它。

ChangeScene

 this.app.loadSceneHierarchy("860757.json", function (err, parent) {
        if (!err) {
            console.log("Load成功，删除这个场景的东西");
            XXXXXX.Root.destroy(); 
        } else {
            console.log("失败");
        }
    });

图片拖拽

官方给了DragHelper，但是在运行的时候有bug。就从网上找了其他的。

var UISlider = pc.createScript('uiSlider');

UISlider.attributes.add('handle', {type: 'entity', default: null, title: 'Handle'});
UISlider.attributes.add('axis', {type: 'string', default: "y", title: 'Axis', description: 'lock drag to axis: x, y or xy'});

UISlider.prototype.postInitialize = function() {

    if( ! this.handle ) this.handle = this.entity.parent.findByName("UISliderHandle");

    if( this.handle ) this.addHandleListeners();
    else throw new Error( "UISlider has no handle" );

    this.isDragging = false;
    this.touchId = -1;

    this.mousePos = new pc.Vec3();

    this.anchorPos = this.handle.getLocalPosition().clone();

    this.screen = this.getUIScreenComponent();
};

UISlider.prototype.getUIScreenComponent = function() {
    return this.handle.element.screen.screen;
};

UISlider.prototype.addHandleListeners = function() {

    this.handle.element.useInput = true;

    this.handle.element.on(pc.EVENT_MOUSEDOWN, this.onPressDown, this);
    this.app.mouse.on(pc.EVENT_MOUSEUP, this.onPressUp, this);
    this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onPressMove, this);

    if( this.app.touch )
    {
        console.log("initing touches");
        this.handle.element.on(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
        this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
        this.app.touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchEnd, this);
        this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
    }    

    this.on('destroy', function() {

        this.handle.element.off(pc.EVENT_MOUSEDOWN, this.onPressDown, this);
        this.app.mouse.off(pc.EVENT_MOUSEUP, this.onPressUp, this);
        this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onPressMove, this);

        if( this.app.touch )
        {
            this.handle.element.off(pc.EVENT_TOUCHSTART, this.onTouchStart, this);
            this.app.touch.off(pc.EVENT_TOUCHEND, this.onTouchEnd, this);
            this.app.touch.off(pc.EVENT_TOUCHCANCEL, this.onTouchEnd, this);
            this.app.touch.off(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
        }
    });

};

UISlider.prototype.onTouchStart = function(ev) {
    var touch = ev.changedTouches[0];
    this.touchId = touch.identifier;
    this.startDrag( ev.x, ev.y );
    ev.event.stopPropagation();
};
UISlider.prototype.onTouchMove = function(ev) {
    for(var i=0; i< ev.changedTouches.length; i++ ) 
    {
        var t = ev.changedTouches[i];
        if( t.id == this.touchId )
        {
            ev.event.stopPropagation();
            this.updateMove( t.x, t.y );
            return;
        }
    }
};
UISlider.prototype.onTouchEnd = function(ev) {
    for(var i=0; i< ev.changedTouches.length; i++ ) 
    {
        var t = ev.changedTouches[i];
        if( t.id == this.touchId )
        {
            ev.event.stopImmediatePropagation();
            this.touchId = -1;
            this.endDrag( t.x, t.y );
            return;
        }
    }
};

UISlider.prototype.onPressDown = function(ev) {
    ev.event.stopImmediatePropagation();
    this.startDrag(ev.x,ev.y);
};
UISlider.prototype.onPressUp = function(ev) {
    ev.event.stopImmediatePropagation();
    this.endDrag(ev.x,ev.y);
};
UISlider.prototype.onPressMove = function(ev) {
    this.updateMove(ev.x,ev.y);
    ev.event.stopImmediatePropagation();
};

UISlider.prototype.startDrag = function(x,y) {
    this.isDragging = true;
    this.setMouseXY(x,y);
};
UISlider.prototype.updateMove = function(x,y) {
    if( this.isDragging ) this.setMouseXY(x,y);
};
UISlider.prototype.endDrag = function(x,y) {
    this.isDragging = false;
    this.setMouseXY(x,y);
};
UISlider.prototype.setMouseXY = function(x,y) {
    this.mousePos.x = x;
    this.mousePos.y = y;
};

UISlider.prototype.update = function(dt) {
    this.updateDrag();
};

UISlider.prototype.updateDrag = function() {

    if( ! this.isDragging ) return ;    

    var device = this.app.graphicsDevice;
    var xOffs = this.handle.element.anchor.x*device.width;
    var yOffs = this.handle.element.anchor.y*device.height;
    var scale = 1/this.screen.scale;

    var screenX = (this.axis == 'x' || this.axis == 'xy') ? (this.mousePos.x-xOffs)*scale : this.anchorPos.x ;
    var screenY = (this.axis == 'y' || this.axis == 'xy') ? (-this.mousePos.y+yOffs)*scale  : this.anchorPos.y ;

    this.handle.setLocalPosition(screenX,screenY,0);
};