Day30. 是结束,也能是开始 - Review

今天是铁人赛的最後一天,我们的内容已经在昨天全数告一段落。

我们今天来分结构回顾一下我们的 30天,也是做一个 Index 帮助大家了解 Matter.js 的功能,如果读者仍有不熟的,可以再回头去看看,或上网找更多的参考,Matter.js在2D碰撞的处理上算是有相当的使用者。

如标题写的,希望这篇文是一路陪笔者走到30天结尾的读者的一个美好收尾,能好好回忆30天内容,也希望新进来的读者能够透过这篇,用一个概观去了解 Matter.js ,成为你回头了解的开始。

我们依据这个原始码页面来把我们的模组做一下图像化。

https://ithelp.ithome.com.tw/upload/images/20211015/201420575HYoLQE1CE.png

我想这个透过 XMind 画的树状图,应该很清楚地帮大家把各个模组的主分类标出来了。

当你不确定这个模组是用做什麽时,对照这个图!你就能看到他的主分类用途。

当你不确定这个分类有哪些模组时,对照这个图!你就能看到看到他下面的有那些模组可以参照。

无敌的吧。

我们依分类稍微写点 comment,算是给大家参考各分类的依据,同时如果我的文章有提到内容,会提供连结标在後面。

模组分类列表

body

物体的模组就是所有 Matter.js 世界中最基本的单元,因为是基础,包括下面拿来创建的工厂方法我们都有详细介绍,Day8的属性其实在一些细部实作上是非常实用的。

World 没有介绍是因为笔者写的 0.17.1 版的文件已经标示为过时,主要功能如重力已被移到 Engine 模组底下,重力也再後面有独立出来介绍。

factory

快速创建图形的方式,如果不是高度客制图形需求,一般会大量使用这边的方法来产生物体,给予对应的图形参数,就能快速生成。

collision (Day10 , Day11)

  • Contact
  • Detector
  • Grid
  • Pair
  • Pairs
  • Query
  • Resolver
  • SAT

碰撞的单元比较特别,我们主要介绍的其实是绑在上面的事件,上面这些模组都仅仅有提到或带过,因为可能都更接近底层的实作。一般人在使用的时候只需理解事件里的资讯、什麽时候会收到碰撞事件的信号就可以了。要查询图形碰撞情况的话可以试试 Query 和 SAT 模组,在 2048 的碰撞後二次判断新生成物体碰撞就是用 SAT 里的方法来做。

render

如何渲染 Canvas 的部分,包含视角操纵,是基本也重要的内容。

core

核心模组,Common有说过比较简单或不常用不讲, Matter 提供的函式更多和插件使用相关,Event 虽然没有单独讲,但其实已经被用到烂掉了,毕竟触发信号是物理引擎中很重要的一环。

其他的都有後面加上对应的日子,Engine 比较特别,因为他包山包海,所以提了几个比较酷(或是常用?)的属性来跟大家分享,我们也有分别在 弹珠台 和 2048 中真的拿来使用。

constraint

弹簧、线条等的创建就依赖这个部分了! MouseConstraint 则是透过滑鼠行为来创建 Constraint,并让创建出的 Constraint 和物体互动。

module

  • License
  • Main

这边是把各模组依顺序组合、以及写明专案的授权。

geometry

  • Axes
  • Bounds
  • Svg (Day21)
  • Vector
  • Vertices

这边是几何学的模组,整个 Matter.js 中需要使用计算或基础型别几乎都在这了!为什麽没提到就是真的很底层,笔者都交给 Library 本身使用就好。仅把 Svg 模组抽出来讲,让大家了解一下怎麽透过 Svg 路径快速创建 Matter.js 世界里的物件,记得我们的 Twitter Bird 吗?不记得的可以去复习一下 Day21。

30天中的实作部分

让大家更了解实际例子怎麽运用 Matter.js、知道 Matter.js 可以做到哪些事情,加上满足笔者的私心(笑),我们总共做了两个专案,专案一是弹珠台,专案二是圆形的2048,这两个专案等笔者後续有空会在独立资料夹完善他们到更像完整专案的样子。

弹珠台 (Demo)

运用到物体生成、碰撞、时间调整与聚光灯、镜头操控、滑鼠互动和重置画布再来一局。

圆形2048 (Demo)

运用到组合体概念确认全部物体、碰撞後操作清除与生成、睡眠控制、重力操纵、物体上附加文字。


上面就是我们回头来看所有的模组与实作专案、相关概念的列表跟简短说明了!

如果是这篇文才第一次接触我们这个系列文,对 Matter.js 没概念,这篇文读过,相信你会知道你需要了解什麽模组,从哪儿开始下手,Have Fun!

最後是作者的小感想时间,以下感言 400字,想略过者也可以直接到下面留言完结洒花(咦)。

这次铁人赛参赛是一时兴起,也是第一次参赛。

这次的大纲与节奏不是事先安排,撰写内容也不是笔者熟悉的内容。因为是没碰过的 Library 跟相对陌生的物理领域,这让每天的内容量不太均匀,有些比较深入的地方可能也没办法讲解,後面突然读懂了,也是一种醍醐味。

中间做出两个小专案笔者觉得很有趣,因为是我自己想做的东西,也是一种以终为始,先订下功能,再回头学习,更有目的。希望这种形式的分享有帮助到读者更理解模组本身。

笔者其实中间有时候会回去读一下自己写的内容,有些地方其实语句比较狭促紧迫,读起来可能有些压力,或是有些地方当时的理解写的并不清楚,现在完赛了,笔者会逐步搬运内容到我的 Medium,搬过去的版本如果有心力会进行润稿,希望让内容变得更易读顺畅。

最後的最後的最後,

这里要说声感谢,感谢所有阅读的朋友,订阅的朋友,追踪的朋友,看着浏览数的增加也能小小满足我的虚荣心,增加了我的成就感。也谢谢参加铁人赛的自己,让这 30天挑战了一件很酷的事!


<<:  Day28 Data Storage in iOS 04 - Core Data 简介

>>:  29. IT铁人赛30天之後

Ruby on Rails CSRF 攻击是什麽?

CSRF(Cross-site request forgery)中⽂翻译成「跨站请求伪造」。通常 C...

加点GCP – cloud function

Golang 加点GCP – cloud function 如果想要开始做点其他事情,就必须脱离本机...

Lisp 语言和你 SAY HELLO!!

第二十五天 各位点进来的朋友,你们好阿 小的不才只能做这个系列的文章,但还是希望分享给点进来的朋友,...

会议结束是沟通的延续

一个会议的结束,依结论要做出的行动,或是待办事项没有人执行。这个会议结束,并没有实质意义。 通常结论...

Day 23 : 模型分析 TensorFlow Model Analysis (TFMA)

模型分析 TFMA 介绍 过往我们关注模型的训练结果,会追踪该模型在每次 epochs 之後的 AU...