前言
传送门
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"
}
]改变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);
};
Comments | NOTHING