1. 程式人生 > >three.js-打造微信爆款小遊戲跳一跳

three.js-打造微信爆款小遊戲跳一跳

第8章 核心概念 工具 建立 布局 項目結構 運動 全部 紋理

第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-打造微信爆款小遊戲跳一跳

three.js-打造微信爆款小遊戲跳一跳