PlayCanvas(四)__业务逻辑篇

发布于 2019-12-03  64 次阅读


正文(持续更新...)

上次说到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"
    }
]

改变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. = 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,并把材质球给它。

不积跬步,无以至千里;不积小流,无以成江海。