「工程实践」Cocos Creator 3.8 2D物理切割实践

COCOS CREATOR 版本:Cocos Creator 3.8

基本思路

  1. 创建可切割的物体:使用2D物理组件Rigidbody2D(2D刚体)和PolygonCollider2D(多边形碰撞体)为要切割的物体设置物理属性。
  2. 射线检测:鼠标画线,并通过射线检测其画线路径上的多边形碰撞体(PolygonCollider2D)。需要正反来两次射线检测来记录射线的路径上所有的交点。
  3. 以一个多边形碰撞体和射线的两个交点为界限把多边形顶点分割为两部分,通过这两部分顶点把这个边形碰撞体一分为二。
  4. 根据分割的顶点重新绘制两个多边形碰撞体。

游戏效果

2.gif

「工程实践」Cocos Creator 3.8 实现《Flappy Bird》2D小游戏

游戏介绍

  • 《Flappy Bird》是一款由越南开发者 Dong Nguyen 创作并在2013年发布且暴红的像素游戏。
  • 游戏玩法:玩家控制一个小鸟,通过点击屏幕使其飞行。游戏的核心目标是穿过一系列竖直排列的绿色管道,同时避免碰撞管道以及天花板和地面,一旦碰撞即意味着游戏结束。
  • COCOS CREATOR 版本:Cocos Creator 3.8

游戏效果

20240802141906.jpg

「工程实践」Cocos Creator 3.8 实现《方块先生》3D小游戏

游戏介绍

  • 《方块先生》是一款入门级别的跑酷小游戏,通过此雏形可以一步步做更多更强大的3D游戏。
  • 此游戏完全参照Cocos引擎官方的bilibili视频教程《合集·麒麟子教你做3D跑酷游戏》
  • COCOS CREATOR 版本:Cocos Creator 3.8

游戏效果

20240826092656.png

「学习笔记」Cocos Creator 3.8 物理系统

Cocos Creator 的物理系统提供了强大的物理模拟功能,如重力、碰撞、摩擦等。Cocos Creator 提供了丰富的组件和 API 实现碰撞检测、刚体运动、关节等。

  • 2D 物理:适用于 2D 游戏,使用 Box2D 引擎。
  • 3D 物理:适用于 3D 游戏,使用 Bullet Physics 引擎。

1. 2D物理系统

在 Cocos Creator 中,2D 物理世界是通过 PhysicsSystem2D 管理的。通常不需要手动创建,因为 Cocos Creator 会自动管理。 物理系统默认是开启的,代码如下:PhysicsSystem2D.instance.enable = true;

「学习笔记」Cocos Creator 3.8 基础入门

Cocos Creator 是一款功能强大的游戏开发引擎,支持 2D 和 3D 游戏的跨平台开发,TypeScript 作为主要脚本语言、拥有强大的编辑器工具链、活跃的社区。

Cocos Dashboard 做为各引擎统一的下载器和启动入口,集成了统一的项目管理及创建面板,方便同时使用不同版本的引擎开发项目。

1. 项目结构

初次创建并打开一个项目后,文件夹的结构如下:

「博客搭建」从 Hexo 转向 Hugo:静态博客迁移

多年前从Hexo开启博客之旅。当时被它丰富的主题生态、基于Node.js环境并轻松部署到GitHub Pages的特性所吸引。 然而随着时间推移,博客文章逐渐累积,逐渐感受到了Hexo构建速度的瓶颈。 直到接触了Hugo,号称“世界上最快的网站构建框架”,使用Go语言编写,千篇文档秒级生成,构建速度更快,内存消耗也更低。

Hexo迁移到Hugo虽然需要一些初期投入,但带来的性能提升和开发体验改善是显著的。Hugo文档详细,学习曲线平缓。

迁移前准备工作

  1. 内容备份
    • 文章源文件(source/_posts/
    • 主题配置文件(_config.yml 和主题目录)
    • 图片等静态资源
  2. 环境配置
    • 先决条件:在使用Hugo时常常需要使用到GitGoDart Sass
    • 下载Hugo
      • 预编译的二进制文件可用于多种操作系统和架构。访问最新发布版本页面,并向下滚动至“Assets”部分。
      • 下载对应操作系统的最新版本压缩文件,然后解压到目标目录,并将该目录添加到PATH环境变量中。
    • 验证安装:
      hugo version

内容迁移

  1. 创建Hugo站点
    hugo new site myblog
    cd myblog
  2. 批量处理Markdown文件(hexo-posts/*.md
    • 手动调整 Front Matter
      • Hexo 的 title: → Hugo 保留
      • date: → 格式改为 2024-01-02T15:04:05+08:00
      • tags: → Hugo 支持相同语法(tags: ["tag1","tag2"]
      • 删除 Hexo 特有字段(如 categories: 建议改为 Hugo 的 categories
    • 自动转换工具(可选):
      • 使用 Python 脚本批量修改 Front Matter
      • 工具推荐:https://github.com/wangchucheng/hugo-hexo
  3. 复制文章到Hugo
    • Hexo_posts复制到Hugocontent/posts/
  4. 静态资源处理
    • Hexosource/images/复制到Hugostatic/images/
    • 文章中图片路径改为:![alt](/images/example.png)

主题与配置

  1. 选择并安装主题:将Ananke主题克隆到themes目录中,并将其作为Git子模块 添加到项目中。
    git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
  2. 向站点配置文件中追加一行,指示当前使用的主题。
    echo "theme = 'ananke'" >> hugo.toml
  3. 手动配置 hugo.toml
    baseURL = "https://yourdomain.com/"
    languageCode = "zh-CN"
    defaultContentLanguage = "zh"
    theme = "ananke"
    
    [params]
      title = "博客名称"
      description = "博客描述"
    
    [menu]
      [[menu.main]]
        name = "首页"
        url = "/"
        weight = 1

构建与发布

  1. 添加新文章
    hugo new content/posts/new-post.md
  2. 文章Front Matter示例
    title: "文章标题"
    date: 2024-01-15T14:30:00+08:00
    tags: ["标签1", "标签2"]
    categories: ["分类"]
    draft: true
  3. 运行包含草稿内容
    hugo server -D # 或 hugo server --buildDrafts
  4. 发布网站:Hugo会在项目根目录的public目录中创建整个静态网站。
    hugo
  5. 托管和部署
0%