2米资源网

VIP
three.js-打造微信爆款小游戏跳一跳

【6546】-three.js-打造微信爆款小游戏跳一跳

  • 声明:本网站所有内容均为资源介绍仅做学习参考使用
  • 如果你想学习交流可以加群联系我,让我们共同学习进步
  • 资源简介:three.js-打造微信爆款小游戏跳一跳
  • 详细描述

    three.js-打造微信爆款小游戏跳一跳


    第1章 课程介绍
     
    介绍了微信小游戏的概念以及相关的由来,从宏观上对于微信小游戏的定位和价值有一个明确的认识
     
     1-1 导学介绍 
     1-2 什么是微信小游戏 
     1-3 微信小游戏与H5小游戏
     1-4 为什么要学习微信小游戏 
    第2章 微信小游戏平台与特性
     
    讲了微信小游戏平台的相关特性,包括微信小游戏工程的建立,微信小游戏开发工具的详细使用,以及微信小游戏相关API的实战等
     
     2-1 微信开发者工具介绍
     2-2 小游戏项目工程初始模板建立
     2-3 微信开发者工具(模拟器介绍)
     2-4 微信开发者工具(编辑器介绍)
     2-5 微信开发者工具(调试器介绍)
    第3章 THREEJS与WebGL核心概念
     
    通过理论和实战,讲解了什么是webgl、什么是threejs以及两者的关系,并且介绍了相关webgl渲染管线的内容
     
     3-1 什么是webgl —— 理论部分(概念)
     3-2 什么是webgl —— 理论部分(GPU业务场景)
     3-3 什么是webgl —— 理论部分(如何对CPU进行编程)
     3-4 webgl实战shader的创建和绑定
     3-5 webgl实战静态三角形的绘制(1)
     3-6 webgl实战静态三角形的绘制(2)
     3-7 webgl实战旋转三角形的绘制
     3-8 webgl实战动态的旋转三角形的绘制
     3-9 threejs理论部分
     3-10 threejs 绘制旋转三角形(场景渲染)
     3-11 threejs绘制旋转三角形(动态效果)
    第4章 项目结构
     
    对四个迭代版本,进行了详细的需求分析,并且对项目的整体结构进行了详细的介绍,包括项目目录设计、threejs框架在小游戏平台的集成、weapp-adapater源码分析和编译等
     
     4-1 项目需求分析
     4-2 MVP项目结构 & 设计 &分析
     4-3 MVP基本项目结构搭建(引入three.js)
     4-4 小游戏平台(旋转三角实战)
     4-5 小游戏平台(旋转三角实战完善)
     4-6 MVP基本项目结构搭建完成
    第5章 基本场景搭建(场景和视角)
     
    详细讲解了webgl渲染管线中的视图矩阵和投影矩阵的推导,并且在webg相关demo中进行了实现,进而实战了threejs的WebGLRenderer、Scene和Camera,剖析其webgl中对应的原理,并开发出跳一跳小游戏的整体场景布局
     
     5-1 基本场景搭建 —— 本章核心内容
     5-2 基本场景渲染理解
     5-3 投影矩阵数学推导
     5-4 视图矩阵推导
     5-5 视图矩阵webgl开发
     5-6 透视投影矩阵webgl开发
     5-7 正交投影矩阵webgl开发
     5-8 mvc基础
     5-9 游戏page的搭建
     5-10 mvc中的event
     5-11 2d画布绘制能力在threejs中的整合
     5-12 使用mvc完成页面切换
     5-13 scene和camera的设置
     5-14 es6的继承多态开发block
    第6章 基本场景搭建( 光照和阴影)
     
    从webgl原理和实现和threejs光照和阴影实战,全方位的去讲解场景中的光照与阴影的搭建
     
     6-1 cube的开发思路
     6-2 光照的原理
     6-3 索引绘制
     6-4 arraybuffer讲解
     6-5 cube的绘制
     6-6 平行光下的漫反射
     6-7 点光源下的漫反射
     6-8 phong模型漫反射下的球体的绘制
     6-9 纹理、阴影、帧缓冲区 理论
     6-10 webgl砖块纹理实现(1)
     6-11 webgl砖块纹理实现(2)
     6-12 webgl砖块纹理实现(3)
     6-13 shadow map对应shader的开发
     6-14 新建framebuffer和对应的纹理
     6-15 渲染缓冲区及framebuffer的关联对象
     6-16 在shader中使用shadow map
     6-17 shader的数据准备
     6-18 绘制时进行shader的切换
     6-19 threejs场景设置光照
     6-20 threejs场景增加背景和地面
     6-21 threejs场景增加阴影
    第7章 基本游戏逻辑开发
     
    在本章中,实现了基本游戏逻辑的开发,包括物理引擎、碰撞检测、跳跃逻辑等等模块,完成跳一跳游戏的基本功能
     
     7-1 bottle绘制分析
     7-2 bottle head部分的绘制
     7-3 bottle bottom部分的绘制
     7-4 bottle body部分的绘制
     7-5 threejs纹理映射&bottle纹理高光
     7-6 bottle head部分旋转
     7-7 动画过程分析
     7-8 动画库基本逻辑开发
     7-9 线性动画的实现
     7-10 ease mode的介绍和应用
     7-11 跳跃逻辑分析
     7-12 跳跃模型旋转开发
     7-13 bottle按压收缩的过程
     7-14 block压缩开发
     7-15 斜上抛运动过程分析
     7-16 斜上抛运动代码开发
     7-17 碰撞检测(1)
     7-18 碰撞检测(2)
     7-19 使用pointInPolygon判断碰撞状态
     7-20 实时碰撞检测
     7-21 实时碰撞检测调试
     7-22 nextBlock的更新逻辑
     7-23 碰撞检测调试
     7-24 跳跃落地效果优化
     7-25 gameover重启游戏逻辑的开发
     7-26 积分逻辑的开发
    第8章 版本迭代
     
    在本章中主要进行了声音的集成和动画细节的优化,深入实战了threejs的各种能力和微信小游戏的api,并且了解了游戏的开发字节,完成之后一个完整的跳一跳游戏功能的版本就完成了。
     
     8-1 音频管理模块开发
     8-2 跳跃过程增加音效
     8-3 坠落逻辑补充+动画库升级停止所有动画能力
     8-4 坠落动画的开发
     8-5 block增加image纹理样式
     8-6 彩色block的开发
     8-7 粒子聚集效果
     8-8 粒子散开效果
     8-9 跳跃增加分数的动画
     8-10 跳跃轨迹的开发

     
    three.js-打造微信爆款小游戏跳一跳
    百度网盘分享地址: 链接: https://pan.baidu.com/s/1gMHBHwitdeAbWsDL5HDicQ 提取码: y650
    2米资源网