nivk-CSDN博客

原创 [ESNext]现在就学起来：class

ES5 及之前定义在 ES5 中，并没有类的概念，但是已经有了类型的概念。那时，我们想创建一个类型，是这样做的：function MyClass() { alert(this instanceof MyClass);}如此，我们定义了一个类型，但同时，他也是一个函数。我们看看不同调用方法所得到的结果：MyClass(); // falsenew MyCla...

2020-03-18 05:40:22 885 4

原创 [WebAssembly入门]二，Hello,World!

本章节所需要准备的内容1、最新版本的Chrome浏览器、最新版本的FireFox浏览器，其他（反正我不推荐）2、一台能打字的电脑正式开始C语言部分首先，我们先从C语言部分入手。在这里，我们先创建一个空文件夹命名为 "WebAssemblyChap1" ，然后我们分别创建两个文件（helloworld.c , helloworld.h），如下图所示：

2017-12-30 17:27:23 5917 4

原创 [WebAssembly入门]一，概念与环境搭建

在Web大行其道的今天，我们是否还需要更进一步？答案是肯定的。现有的技术使得我们让在线互动变得可能，我们可以在浏览器中玩游戏、看电影、听音乐、与好友在线聊天等等。看起来好像什么都能做，但是深入来讲，好像又什么都做不了。接下来，我们就来看看我们还能做些什么。

2017-12-30 11:42:37 4663 1

原创音乐游戏格式解析之【Cytus】

Cytus是雷亚游戏公司（Rayark）于2012年1月发布的一款音乐游戏。绝对称得上是一款品质上乘的游戏。对于我们游戏开发者而言，最想了解的，就是它核心内容的制作方式了。那么，今天我们就来解析一下它所使用的谱面文件吧。首先，我们来一个文件全貌一览（取自Cytus，Deemo章节Hua-sui-yue，简单难度）

2016-12-26 11:30:20 3000

原创 JavaScript重载函数的实现【重构优化版】

前言：为什么我们需要JavaScript重载函数？一把剪刀可以用来做什么？剪刀可以用来剪纸，也可以用来剪鱼。我们需要考虑的是更复杂的情况，如果我需要一剪刀下去，同时剪了“纸”和“肉”，这时才能达到某个神秘成就。我们该如何做？如何使因参数变化而变化的函数内部实现更优雅？

2016-12-22 05:16:53 1558 2

原创在微信及支付宝下的音频自动播放

废话不多说，直接上代码。// 微信、支付宝音频Hack方案; void function (win, doc, undefined) { // 原理：调用链中的某个事件被标识为用户事件而非系统事件 // 进而导致浏览器以为是用户触发播放而允许播放 Audio.prototype._play = Audio.prototype.play; HTMLAudioEl

2016-06-28 19:42:16 3353

翻译 [软件渲染器入门]六-应用纹理、背面剔除以及一些WebGL相关

下面是本系列的最后一个章节了。我们将看到如何从Blender中导出贴图和纹理坐标来使我们的网格应用纹理。如果你已经成功的了解了之前的教程，应用一些纹理对你来说应该是小菜一碟。主要概念依旧是在每个顶点间插补一些数据。在本章的第二部分中，我们将看到如何提高我们的渲染算法性能。为此，我们将使用背面剔除来使得只有我们能看到的部分被绘制。但是更进一步，我们会用最后的秘密武器：GPU。那么你将会明白为什么OpenGL/WebGL和DirectX这些技术对实时3D游戏非常重要。它们有助于利用GPU而不是CPU来渲染我们的

2016-03-02 01:53:15 3517

翻译 [软件渲染器入门]五-平面着色和高氏着色

这可能是整个系列中最棒的部分：如何处理光照！在之前，我们已经搞定了让每个面随机显示一种颜色。现在我们要进行改变，计算出光的角度，让每个面有更好的光照效果。第一种方法叫做平面着色。它使用面法线，用这个方法我们也会看到不同面的效果。但是高氏着色则会让我们更进一步，它使用顶点法线，然后每一个像素使用3个法线进行插值计算颜色。

2016-02-28 17:40:05 3194

原创 Obj模型导入器实现

注意：材质文件的读取还没有搞定，有空的时候更新。void function () { function loadFile(url, syne, type, callback) { /// Ajax加载文件 /// 文件地址 /// 是否异步加载 /// Mime类型 /// 回调函数

2015-12-01 16:51:44 2035

原创 Html5应用屏幕适配方案

前言相信现在不少人用Html5来制作手机页面，但是最大的问题就是屏幕的适配问题了。虽然市面上有很多的移动框架可以帮助你解决不少问题，但一旦发生问题，很多人都会懵了。本篇文章的目的就是为了让大家了解适配方案，以便解决问题。屏幕适配的多种方案：从上图我们可见，为iPhone5中微信打造的页面是不能直接显示到其他分辨率手机上的，否则会造成有大量空白区域或内容缺失的情况

2015-12-01 16:23:02 4544 2

翻译 [软件渲染器入门]四-额外章节，使用技巧和并行处理来提高性能

由于我们的3D软件渲染引擎使用的是CPU运算，因此它将耗费大量的CPU处理时间。不过倒是有一个好消息，那就是CPU大多是多核心的。那么，我们可以想象一下使用并行处理来提高引擎性能。不过我们只能在C#中这么做，至于为什么Html5不可以，我将会稍后做出解释。我们在此篇章中可以学到一些简单的技巧，以此达到优化渲染性能的目的。而且实际上，我们也得到了从5 FPS提升到50 FPS的结果，这可是10倍的性能提升！

2015-11-29 23:26:26 1830

翻译 [软件渲染器入门]四，填充光栅化的三角形并使用深度缓冲

本章我们将讲解如何使用三角形光栅化算法来填充三角形。然后，我们将使用深度缓冲，以避免在后面的面跑到前面来的问题。

2015-11-24 17:16:43 3391

翻译 [软件渲染器入门]三，加载通过Blender扩展导出JSON格式的网格

3D建模有助于3D设计人员和开发人员之间的协作。设计人员可以利用其最喜欢的工具来构建场景或网格（3D Studio Max、Maya、Blender等……）。然后，他将作品导出为开发者可以加载的文件格式。开发者将最终将网格加载进实时3D引擎中。有很多种格式可以这么做。在我们的例子中，将使用Json格式。实际上，David Catuhe已经做了从Blender中导出.babylon后缀的Json格式文件导出器了。我们马上就可以看到如何解析该文件并显示在我们可爱的软件渲染引擎中了！

2015-11-23 23:53:18 5914 2

翻译 [软件渲染器入门]二，绘制线段和三角形来获得线框渲染效果

现在我们已经通过前面的教程编写相机、网格和设备对象的核心逻辑建立了3D引擎的核心，我们可以对渲染工作做一些增强了。下一步我们再连接点来绘制一些线条来组成一个线框渲染效果。

2015-11-23 19:14:31 3106

翻译 [软件渲染器入门]一，编写相机、网格和设备对象的核心逻辑

我非常乐意通过一系列教程和大家分享如何建立所谓的”3D软件渲染引擎“。”软件渲染引擎“意味着我们将只使用CPU建立一个3D引擎，完全不使用GPU。（请不要忘记毁灭你的80386？）我将与你分享C#、TypeScript以及JavaScript三种版本的代码。

2015-11-23 15:52:29 4152 1

原创 PhotoShop图层混合模式的Canvas实现

前端开发人员可能会遇到这样一个问题。当设计人员给到一个PSD以后，会发现其中有些图层是有图层混合效果的。这样会产生一个情况就是，我们为了这个效果而不得不将背景+带混合的图层切到一起。当这样的元素多了以后，我们所切出的图片就会越来越大并且难以修改。那么，本章我们将讲解如何使用Canvas元素来实现混合模式。以达到减少图片体量和数量的效果。首先，我们来讲一下基本

2015-11-16 16:14:17 5991 2

原创 WebWorker 100%前端基础应用

前言：本文为前端开发人员特别编辑，避免过多的原生理论、后台操作以及其他知识面的讲解。适合您作为快速入门上手教程使用。如有纰漏，还望在评论中提出，我将及时更正。感谢您观看本文章教程，祝您工作生活愉快！^_^注意事项：本文中所有链接除引用处会提到外，文章最后也会统一提示。（本文不包含 SharedWorker内容）简要介绍什么是WebWork

2015-11-12 12:10:06 3542

原创 Xna内容管道及Xnb格式解析

前言：内容管道的设计十分超前，乃至于至今看来都还算是一个比较新颖的资源处理方式。本章将深入讲解内容管道的作用及Xnb格式分析。本章主要内容有： 1.Xna简介 2.内容管道简介 3.内容管道默认支持表 4.内容管道处理流程 5.Xnb格式解析1.什么是Xna？

2015-11-02 02:23:09 4343

原创电池Api的用法与应用

什么是电池API？顾名思义，就是检测电池当前使用状态的API。电池API的用途？用途很多，举几个简单的例子：当用户电池电量低，自动保存应用当前状态，以防不测。当用户电池电量低，自动降低应用效果，以达到节省用户电量的目的。当用户正在充电，自动切换到最高性能模式，保证应用的流畅和最大的效果。等等用途……哇哦~这么厉害，那我们怎么使用呢？？？？这个先不

2015-10-06 22:01:09 1855

原创 JavaScript的重载函数实现

接触过Java、C#的人应该都比较了解重载函数。但是JavaScript中并没有这样的机制是不是令人倍感烦恼呢？不用怕！因为解决方法来啦！~你没用过Java、C#？你问我什么是重载函数？嘛~那我就举一个简单的栗子好了~fn("nivk", 21); // 我叫nivk，我今年21岁fn("nivk"); // 我叫nivk，不过年龄保密哦！fn("nivk",

2015-10-05 00:49:07 962

原创场景转场动画的Canvas实现

废话不说，先上图图1：转场前图2：转场中（动画效果此处请看末尾链接）图3：转场后看完效果，我们来讲讲原理。首先我们需要准备一张转场用的图。理论上所有图片都可以作为过渡图使用。我使用的是一张带有天使翅膀图案的图片作为过渡图。首先，将过渡图黑白化。var pixs = context.getImageData(0, 0,

2015-10-04 23:45:30 4127

原创 JavaScript实现自定义对象的自定义事件

前言：大家都知道，在使用JavaScript可以很方便的使用addEventListener函数给DOM对象快速绑定一个或多个事件侦听器。我们又如何在JavaScript的自定义对象中使用此方法并触发事件呢？这就是本章节的核心内容了。目的：现在有一个需求，要求“a对象”能够让“b对象“做一系列动作。分析后我们得知。首先，”b对象“有一个固定名称作为入口让a对象调用，并且

2015-04-19 11:05:53 3654 5

原创关于JavaScript中Get/Set访问器

有时候大家可能会纳闷，在使用JavaScript的时候，只需要给一个系统变量赋值就可以触发一系列操作去相应。但是我们在写Js的时候，修改了一个自定义变量，却连个P都没有。是不是很郁闷呢？其实，我们现在就可以做类似系统变量那样的功能了！做个假设，我们有一个变量，要求可以输入出生年份并自动计算当前年龄。如：// 定义一个年龄变量并赋予初始值var age = 18;

2014-04-01 16:45:13 3696 3

原创 Visual Studio-JavaScript注释写法

用过Visual Studio的人应该对它的代码智能提示很熟悉了吧？可是，如果您是一位Web开发人员可能就感觉不那么爽了。因为Visual Studio对代码的提示太有限了！不过，最近如果您关注jQuery的话，应该已经知道Visual Studio已经可以对jQuery进行比较详细的提示了！这是怎么做到的呢？其实很简单，而且我们也可以很快上手。先来一段WebGL的

2014-03-16 15:33:54 4405 1

翻译 BMS数据格式规范【BMS Format Specification】

译者前言：有很多音乐游戏都使用了此格式或此格式的变种，这里举一些例子：《节奏地带》、《VOS》、《劲乐团》、《MYDJ》、《太鼓达人》《MYO2》、《DJMAX》、《超级乐者》、《超级舞者》等均使用了此格式及其变种。但还有一些游戏类似：《节奏大师》、《劲舞团》、《OSU!》、《巨星》等游戏使用的则不是此格式。以上仅作一些游戏使用格式的区别及应用场景示例，请读者自己体会~

2014-03-08 00:25:14 7415 4

原创 Html5游戏开发攻略（像素效果篇）

非常简单，而且网络上也有一些讲解像素效果处理的文章了，这里不多提。简单的分享一些我目前正在使用的方法。有两种方法可以做到像素的处理。第一：普通运算法。（适用于单像素效果处理，速度较快）第二：卷积运算法。（适用于多像素影响计算，速度较慢但效果多变）先放一张我们这篇所使用的原图(本文中使用的像素数据都是getImageData

2014-03-06 16:52:06 2367 5

原创 Html5游戏开发攻略（免费的音乐面包篇）

这一篇我们来尝尝免费的面包，至少目前是这样的。QQ音乐相信大家或多或少都使用过，里面的音乐资源非常多。这个时候你可能就明白了，没错，我们要在游戏中使用QQ音乐的资源当背景音乐~~~~~哦耶~！咳咳，不过呢，由于QQ音乐在线接口是加密的，所以我们需要一系列工作来解密并调用。可要做好准备哟！先放一张预览图：过程其实很简单。第一步：申请QQ音乐服务器访问权

2014-03-03 16:32:42 2753 4

原创 Html5游戏开发攻略（Canvas设置篇）

本章讲解了Canvas的同比缩放、鼠标位置矫正等。适合做H5游戏的人士哦！

2014-03-03 13:21:04 3877 6

原创 Html5游戏开发攻略（API篇）

如果我们要做一个完整的游戏，一般都有哪些效果呢？首先，我们肯定是需要全屏的，而且，3D游戏还有鼠标锁定的功能。这些功能有很大一部分都是Html5内置的。下面，我将一个一个详细的写给各位看官。

2014-03-02 22:56:14 3177 4

原创 RpgMakerXp地图原理分析

要制作一个2D RPG游戏，所需的地图大的种类无非两种：TileMap、PicutreMap。这一章，我们主要针对于RpgMakerXp所实现的TileMap做分析。

2014-02-16 23:50:52 4491 2

Nivk经验分享