playcanvas初级

我们在开始本文章之前，推荐大家一个小工具，方便我们在油管上看英文视频

YouTube™ 双字幕

我们通过YouTube上Daniel Wood博主的playcanvas视频来浅入一下（看着文章来梳理视频内容食用更佳哦！）

start：工具下载

YouTube™ 双字幕可以帮助我们添加双语字幕

安装步骤：谷歌浏览器->设置->扩展程序->打开应用商店->查找->安装

下载完成之后，我们在扩展程序图标上就可以使用了，如果不起效果，请重新打开浏览器

一、第一课（Getting started with PlayCanvas）

我们第一课先来简单使用一下我们的可视化平台

第一节课主要是熟悉我们的可视化面板，上一篇playcanvas初识有讲解，如果感兴趣，我们还是可以看看我们的第一课的视频的

二、第二课（Entities and materials）

实体和材质是什么？

实体就是我们编辑器里面的方块、平面等几何体

材质是我们实体需要结合的属性

1.当我们创建材质资源的时候，我们可以将其分成一个组，方便我们以后去管理我们的材质

2.我们的贴图，那些属性，我建议先去看看Three.js的教程吧，或者有三维软件的使用基础也是容易理解的，如果不具备这些基础概念可以看看我之前的threejs的文章

3.简单的赋予实体材质的步骤就是如下图（还是比较容易的）

4.这节课视频主要讲的是贴图和材质和我们材质的一系列属性（不是api）

5.点击我们的Camera（摄像机）调节角度，点击界面右上角的Launch就可以渲染我们的画面了

三、第三课（Lighting）

我们的灯光也是有3种，平行光、点光源、聚光灯

这节课除了讲解几种灯光的属性之外，也有灯光与阴影的关系

聚光灯效果，我们在右边的属性栏也可以去修改我们聚光灯的其他属性

点光源效果（可以看成一个灯泡）

四、第四课（Skyboxes in PlayCanvas）

主要展示如何添加天空贴图

我们的贴图就是从这里下载的，可以去试试

[贴图纹理]: “http://www.humus.name/index.php?page=Textures “

具体的步骤总结：

⚠️注意：还是看视频详细，这只是总结一下哈哈哈

五、第五课（Particle systems in PlayCanvas）

这节课的东西我比较喜欢，粒子系统（会生成粒子和粒子动画）

具体的步骤总结：

这个比较简单，到了后面，这个会生成很多惊艳的动画效果

⚠️注意：这个属性比较多，认真看

六、第六课（Overview of scripts in PlayCanvas）

这节课没什么东西，就是讲解一下我们script资源文件的构造（给没有javaScript基础的同学讲的）

有基础的同学可以快速略过了

具体的步骤总结：

主要是讲一下script资源的操作

七、第七课（Make a 3D object move with code）

这节课开始就要编写js脚本文件了

通过我们下面的脚步编译，我们就可以渲染出方块渐行渐远的动画了

具体的API我们可以查询文档了

//test.js
var Test = pc.createScript('test');
var Move = function(entity){
  this.entity = entity;
}
// initialize code called once per entity
Test.prototype.initialize = function() {
    
};

// update code called every frame
Test.prototype.update = function(dt) {
    this.entity.translateLocal(-0.01,0,0);
};

// swap method called for script hot-reloading
// inherit your script state here
// Test.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/

八、第八课（Moving objects with keyboard input）

利用键盘的按键来控制我们实体的移动、旋转等

建议不要跟着视频的写法来练习，要自己去查文档，因为视频已经有点陈旧了

api都有所变化

我们的脚本实现的是利用键盘的上下左右来控制实体的上下左右

//test.js
var Test = pc.createScript('test');
var keyboard = new pc.Keyboard(window);
var Move = function(entity){
  this.entity = entity;
}
// initialize code called once per entity
Test.prototype.initialize = function() {
    
};

// update code called every frame
Test.prototype.update = function(dt) {
   if(keyboard.isPressed(pc.KEY_RIGHT)){
       this.entity.translate(0.01,0,0);
   }
    if(keyboard.isPressed(pc.KEY_LEFT)){
       this.entity.translate(-0.01,0,0);
   }
    if(keyboard.isPressed(pc.KEY_UP)){
       this.entity.translate(0,0,-0.01);
   }
    if(keyboard.isPressed(pc.KEY_DOWN)){
       this.entity.translate(0,0,0.01);
   }
};

// swap method called for script hot-reloading
// inherit your script state here
// Test.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/

九、第九课（Rotating objects with keyboard input）

这节课和上节课的内容差不多，就是利用键盘按键去控制实体的其他属性

教js零基础的同学一下变量的基础写法（可以快速略过了哈哈哈，还得扫一眼哈）

十、第十课（Rigid Bodies and Collision in PlayCanvas）

PlayCanvas中的刚体和碰撞这节课的知识点还是可以的

大体是讲物体碰撞的属性和运动

根据步骤可以实现碰撞

十一、第十一课（Adding sound to your game）

我们的游戏进去是不是有背景音乐呀，这节课就是将背景音乐加载进来

Audio Listener可以简单的说像耳朵一样，可以听见附近的声音

大体步骤如下，具体可以看视频了（还有许多细节）

十二、第十二课（Controlling audio with scripts）

这节课就是延续上面的，对于audio的属性讲解和脚本编写了，

这个任务交给你们了，写好评论，给你点大赞👍

参考链接：

[playcanvas初级教程]: “https://www.youtube.com/watch?v=fXc-JjH2nNo&list=PLGmYIROty-5ZX-a88X8ztUeYSPeuBj7rG “
[playcanvas官网API]: “https://developer.playcanvas.com/en/api/ “
[playcanvas中文]: “https://developer.playcanvas.com/zh/ “