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 斜上抛运动过程分析
7-15 斜上抛运动代码开发
7-16 碰撞检测(1)
7-17 碰撞检测(2)
7-18 使用pointInPolygon判断碰撞状态
7-19 实时碰撞检测
7-20 实时碰撞检测调试
7-21 nextBlock的更新逻辑
7-22 碰撞检测调试
7-23 跳跃落地效果优化
7-24 gameover重启游戏逻辑的开发
7-25 积分逻辑的开发
第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 跳跃轨迹的开发
第9章 排行榜与发布
在本章中主要进行了排行榜的开发,和游戏最终的一些调优,并打通游戏的发布流程,完成本章后跳一跳游戏全部的功能和打包就完成了。

第10章 课程总结
对课程之前学习的内容进行总结,形成以threejs和微信小游戏两个技术块为核心的技术栈,全面形成3d开发的技术思维

下载地址:three.js-打造微信爆款小游戏跳一跳

原文地址:https://www.cnblogs.com/liuyunboke/p/10010471.html

时间: 2024-10-10 00:28:45

three.js-打造微信爆款小游戏跳一跳的相关文章

.net开发 微信小游戏跳一跳辅助程序

一次巧合我看到了一篇关于微信小游戏跳一跳的辅助开发源码,链接:http://mp.weixin.qq.com/s/qGpoHNEf1A2AlofKFVdE2w 然后我试着下载下来跑一遍看能不能运行,显然是不能的,我总结了让能跑起来的几个步骤. 1.adb 环境变量配置 在网上下载 adb工具 1.0.32版本(比这个高或低的版本的可能连接不上),解压到某个文件夹下: 右击计算机——属性——高级系统设置——环境变量: 弹出”环境变量“对话框,单击”新建“一个环境变量. 在新建系统变量里,配置变量名

用Kotlin破解Android版微信小游戏-跳一跳

前言 微信又更新了,从更新日志上来看,似乎只是一次不痛不痒的小更新.不过,很快就有人发现,原来微信这次搞了个大动作--在小程序里加入了小游戏.今天也是朋友圈被刷爆的缘故. 看到网上 有人弄了一个破解版的,于是自己也跟着网上的案例整了一下,感觉挺有意思的. 游戏如下: 来玩游戏 劳动成果 跳一跳 微信小程序可以玩游戏了,我们来破解一下<跳一跳>这个官方出品的小游戏吧. 思路 用usb调试安卓手机,用adb截图并用鼠标测量距离,然后计算按压时间后模拟按压. $ adb shell input sw

小游戏“跳一跳”——站在巨人的肩膀上,用技术为自己助力

在更新最新版微信之后,聊天列表下拉会出现一个崭新的模块,其中就有新推出的"跳一跳"小游戏.而在我几经努力奋斗到266分的时候,已经有技术大牛占据1999的高地... 抱着试一试的心态和蠢蠢欲动的好奇心... 实现了程序助力玩游戏... 具体代码来自gitHub的python大牛... 感兴趣的同学可以和我一起站在巨人的肩膀上... 另外说一点, 如果以后还想玩"跳一跳"的话... 不建议你接着往下看... 因为当你有了捷径... 整个游戏瞬间变得索然无味... 如果

微信小程序 跳一跳 外挂 C# winform源码

昨天微信更新了,出现了一个小游戏"跳一跳",玩了一下 赶紧还蛮有意思的 但纯粹是拼手感的,玩了好久,终于搞了个135分拿了个第一名,没想到过一会就被朋友刷下去了,最高的也就200来分把,于是就想着要是开发个辅助就好了,于是简单想了一下最高游戏 先来说下这个游戏的界面和规则: 先看看界面 规则:按住屏幕 按一定时间松开就可以跳跃,跳跃到前方的图案中得1分,图按中间得2分(连续多个中间累加2分,比如第一个2分 第二个4分 第三个6分 最高累计32分) 其它规则不说明了 整理了下实现原理,其

“匿名聊聊”作者谈如何打造现象级爆款小程序

前段时间小程序“匿名聊聊”刷爆了朋友圈,可惜后面被屏蔽了.作为第一款现象级呈现爆炸级传播的小程序它是如何做到的呢?我们就跟随“匿名聊聊”作者来聊聊如何打造现象级爆款小程序. 作为第一款现象级呈现爆炸级传播的小程序,“匿名聊聊”背后的公司:朋友印象是一家深耕社交产品的公司,创始人栗浩洋和魏志成两人都公开表示,这次的“匿名聊聊”是扔出的一个问路的石子,真正的生化武器和核弹还在后面. 被寄予厚望的小程序自今年1月上线以来,一直表现的冷冷清清.流量入口没有优先级的倾斜,用户获取提供的也是模糊搜索,即便微

爆款AR游戏如何打造?网易杨鹏以《悠梦》为例详解前沿技术

7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行.本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术.新实践,如AR.区块链.安全.大数据等.网易AR游戏生态合作负责人杨鹏表示,传统游戏模式趋同,AR游戏将是下一个重要风口网易AR游戏生态合作负责人杨鹏做了<从网易悠梦看AR前沿技术>的主题演讲,分享了网易基于AI技术和硬件基础所打造的爆款游戏<悠梦>,并详细了该游戏的AR游戏引擎.AR SDK和洞见内容浏览器等技术方案,助力<悠梦>成为年度

初学JS——实现基于计时器的小游戏。

这几天一直在看网易云课堂上免费的JS课程,正好今天看到讲了计时器setInterval,第一感觉就是像C#里的TIMER.然后课程里举得例子正好通过计时器改变新生成窗口的位置, 然后就突然有了灵感!可以写一个“抓住我”的小游戏. 因为刚学JS 懂的实在很少,所以就通过自己已经学过的内容实现了, 主要原理是建一个5X5的表格,每一个格子里放一个DIV,并通过数字命名ID 1-25. 然后就是通过网上找的一个获取随机数的方式,getelementbyid获取随机的一个DIV并且通过innerHTML

CSS+js打造的网页版俄罗斯方块游戏

<HTML> <SCRIPT> parent.moveTo((screen.width-775)/2,(screen.height-540)/2); parent.resizeTo(775,540) </SCRIPT> <HEAD> <META NAME="Title" CONTENT="JScript Simple Tetris"> <TITLE>CSS+js打造的网页版俄罗斯方块游戏丨石家庄

Chrome 中的彩蛋,一款小游戏,你知道吗?

今天看到一篇文章,介绍chrome中的彩蛋,带着好奇心进去看了一眼,没想到发现了一款小游戏,个人觉得还不错,偶尔可以玩一下,放松放松心情!^_^ 当 Chrome 无法连接到互联网时, 或者上着网突然掉线,刷新页面时报错, 此时错误提示上方都会有一只小短手霸王龙.嗯,表面上看起来也没什么特别之处,因为小短手在早期 Chrome 中有了.但一按空格键(或方向键 ↑ ),你就打开了一扇神奇之门! 往下看,小短手这不就跑起来了么! 按下空格键(或方向键 ↑ ),小短手就会跳.如果碰到仙人掌,游戏就结束