今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0x1099bb }): let imageURL =“./image/bunny.png”: PIXI.loader .add('bunny',imageURL) .load(init): function init(loader,resources){ let bunn…

建立canvas 今天开始我们一步步来看怎么使用PixiJS吧! 在开始之前,要先提醒各位需要先运行webserver,否则将会遇到一些奇怪的问题喔! 最基本的canvas画布是肯定需要的,Pixi提供了PIXI.Application建构式方便我们建立. let app = new PIXI.Application(800,600,{backgroundColor:0x1099bb}): document.body.appendChild(app.view): PIXI.Application…

今天我们来说then一些特殊情况以及Promise.all()与Promise.race(). 我们都知道函式作为参数传入时,可以参照的方式传入,也能传入时执行拿回传值作使用: function useReference(cb){ console.log(“useReference”): console.log(cb()): } function useFunctionValue(val){ console.log(val): } function funB(){ return“funB”: }…

材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材质」(texture)? PIXI用WebGL的GPU渲染图片,所以图片需转成GPU可用版本,可被WebGL处理图片称为「材质」(texture). 而在放进sprite片前,将原始图片转成WebGL texture形式,可以提高效率. PIXI使用材质暂存(texture cache)来储存和参考…

后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等,什么是WebGL(sxjlf88)? WebGL是一种JS的API,让网页能不需使用外挂程序就能在HTML的canvas元素中实现二维及三维渲染. 不过要注意的是,有些浏览器预设会把WebGL关闭,避免太吃性能,要打开可以参照这篇文章How can I enable WebGL in my bro…

this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函式来使用,但有想过到底是从哪里呼叫到这个函式吗? this通常被称作函式背景空间(function context),也就是说透过this我们可以知道到底是由谁呼叫这支函式(yjssqsdg).我们无法在一开始定义它,只有函式呼叫时候才能确定. 函式的呼叫有四种方式: 作为函式呼叫 作为一个(物件)…

昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可以透过.constructor来存取建立物件的函式以此来作类型检查.」,但是这个例子却会导致trickyMan的建构式的原型被复写,无法去判断. function Person(){}: Person.prototype.say =“Hi”: function trickyMan(){}: tric…

前两天说明面向对象的三大特性及JS不符合面向对象,只能称作支持面向对象而已,今天我们来看看JS的原型继承. 首先我们先来看,什么是原型(vmwork): 两个物件之间的原型关系(prototype relationship)跟继承(inheritance)有关: 每个物件都可以有另一个物件作为它的原型(prototype),如此一来,前者就会继承其原型的所有特性. 一个物件藉由内部特性(property)[[Prototype]]来指定其原型. 每个物件都有这个特性,但它可能是null.由[[P…

昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特色,封装.继承及多态,这三个都是抽象的概念. 其中继承这个抽象的概念,是为了避免多个类别间重复定义了相同行为与实作.基本上有两种实作的方式可以实现,「原型继承」与「类别继承」. 这两者分别的特色如下. 类别继承classical inheritance: 可以从同一个类别(class)中实例多个物件…

闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这还不想认识他吗! 那什么是闭包呢?它是一种数据结构,可以说是一种技术,能记住函式及函式被建立时当下环境,也就是说函式可以存取在建立时作用范围内的变数(jmcintoshcc). 我们先来看一个最简单的示例: var outer =“global”: function outerFun(){ cons…