AIGC助力小游戏开发全流程

原创已于 2025-08-31 20:23:09 修改 · 1.1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#AIGC #小游戏 #html5 #phaser

于 2025-08-31 20:07:26 首次发布

AI助力下的小游戏开发专栏收录该内容

5 篇文章

订阅专栏

常规的H5小游戏开发全流程包括：游戏概念设计、素材设计与生成、代码开发阶段、测试优化阶段、部署上线，五个阶段。

在常规的H5游戏开发全流程中，游戏设计、素材制作、开发测试及部署设计到的能力非常全面，罕有人能够全部精通，尤其是同时擅长配乐、美工和开发的人才少之又少，而AIGC的出现，可以拟补单兵作战能力的不足。在素材设计方面可以生成音效、绘制素材图片甚至3D建模也在尝试中，开发阶段的代码编写，测试阶段的代码测试，基于AIGC都可以完成。

但是需要注意的是AIGC目前还不是万能的，它就像一个能够快速输出结果的拥有初级职称的员工，如何能够更好的给AIGC布置任务，如何更好的检查其工作的成果，是所有基于AIGC独立开发者的重要工作。

概念设计与工程准备

在游戏设计的概念阶段主要需要确认游戏的类型、背景、角色、关卡设计等，这个主要以示意图、文字描述等形式，我们当然也可以再这个阶段借助AIGC产生创意，但是需要注意AIGC的创意往往有些跑偏，需要人为调整的工作也比较多，所以我建议在这个阶段，最后由设计者自己完成。

为了便于管理H5游戏项目，我们建议按照如下目录结构创建工程目录：

my-ai-game/
├── assets/
│   ├── images/
│   ├── audio/
│   └── sprites/
├── src/
│   ├── scenes/
│   ├── entities/
│   ├── utils/
│   ├── config.js
│   └── main.js
├── index.html
└── README.md

素材设计

素材准备往往包括美术素材（图像、动画、UI元素）、音效和背景音乐等。

素材类型	传统制作方式	免费素材网站	AI推荐工具	输出格式
核心素材	Photoshop等工具绘制	Kenney.nl、OpenGameArt.org等	Midjourney（MJ）和StableDiffusion（SD）或即梦、可灵等	PNG序列/Spine
动态元素	Spine、DragonBonesPro、Cascadeur等骼动画生成		Spine AI？	JSON动画数据
场景美术	Photoshop等工具绘制	Kenney.nl、OpenGameArt.org等	Dall-E 3+场景编辑器	分层PSD
音效/音乐	Audacity、Ardour等工具制作音乐	freesound.org等	AIVA/Soundraw	MP3/WAV
UI元素	Figma等工具绘制UI		Figma+Khroma	SVG/PNG

完成素材制作后要放入到项目的assets文件夹中，并分门别类（images, audio, sprites等）存放。

开发阶段

技术栈组合

游戏引擎：Phaser.js
AI框架：DeepSeek
开发环境：VS Code / CodeBuddy IDE
版本管理：Git

安装Phaser 3

npm install phaser

创建`index.html`文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI小游戏</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script>
    <!-- 或者使用本地安装的Phaser（如果通过npm安装） -->
    <!-- <script src="./node_modules/phaser/dist/phaser.min.js"></script> -->
</head>
<body>
    <div id="game"></div>
    <script src="./src/main.js"></script>
</body>
</html>

在`src/config.js`中创建配置对象

export default {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: [/* 场景列表 */]
};

在`src/main.js`中初始化游戏

import Phaser from 'phaser';
import config from './config';
import BootScene from './scenes/BootScene';
import GameScene from './scenes/GameScene';

const gameConfig = {
    ...config,
    scene: [BootScene, GameScene]
};

new Phaser.Game(gameConfig);

创建场景（在`scenes`目录下）

BootScene.js：预加载资源
GameScene.js：游戏主逻辑

例如，在BootScene.js中预加载资源：

export default class BootScene extends Phaser.Scene {
    constructor() {
        super({ key: 'BootScene' });
    }
    preload() {
        // 加载资源
        this.load.image('player', 'assets/images/player.png');
        this.load.image('enemy', 'assets/images/enemy.png');
        this.load.audio('backgroundMusic', 'assets/audio/background.mp3');
        // ... 其他资源
    }
    create() {
        this.scene.start('GameScene');
    }
}

在`GameScene.js`中编写游戏逻辑

创建玩家和敌人。
实现玩家控制（例如键盘控制）。
实现敌人AI行为（例如使用简单的寻路算法、状态机等）。
添加碰撞检测和游戏规则。

主流大模型🧠核心特性对比总览表（2025年）

模型名称	研发机构	参数规模	核心优势	适用场景	技术亮点	使用成本/开源情况
Gemini 2.5 Pro	Google	未公开	多模态推理顶尖，支持百万Token上下文，代码生成能力极强	复杂应用开发、科研分析、跨模态任务	支持100万Token长文本；自主思考架构；多模态（文本/图像/音频/视频）	云平台按量计费（如Vertex AI）
DeepSeek-R1	深度求索	671B	强化学习训练，推理高效透明，数学与代码能力领先	教育辅导、金融分析、逻辑密集型开发	全RL训练（无需监督微调）；支持128K上下文；开源免费（MIT协议）	开源免费，API成本为GPT的3%
文心大模型 4.5	百度	未公开	原生多模态理解，中文优化强，工业级知识增强	企业服务、内容创作、中文场景任务	融合文本/图像/音频/视频理解；支持插件机制（搜索/文档问答）	0.004元/千Token（输入）
文心大模型 X1	百度	未公开	深度思考链，工具调用能力突出	复杂规划、长文创作、多工具协同任务	端到端思维链训练；支持调用代码解释器/AI绘图等工具	0.002元/千Token（输入）
DeepSeek Coder V2	深度求索	未公开	仓库级代码理解，高效调试与重构	跨文件编程、代码审查、自动化重构	拓扑排序解析依赖；支持主流IDE集成	输入1元/百万Token，输出2元/百万Token
CodeGeeX	清华/智谱AI	40层Transformer	多语言代码生成与翻译，轻量部署	教学辅助、跨语言项目迁移、代码补全	支持Python/Java/JS等100+语言互译；开源适配昇腾/NVIDIA	免费开源（GitHub）
Qwen2.5-Omni	阿里巴巴	7B	全模态处理，轻量化高效推理	移动端应用、实时交互、轻量级多模态任务	融合文本/图像/语音输入；低延迟响应	未公开（阿里云API调用）
Mixtral	Mistral AI	未公开	稀疏专家混合架构（SMoE），高性价比长文本处理	长文档摘要、多轮对话、低成本部署	8专家动态路由；支持32K+上下文	开源（Apache 2.0）

关键能力💡补充说明：

1）推理性能

Gemini 2.5 Pro：在Humanity’s Last Exam测试中得分18.8%，代码生成任务（SWE-Bench）达63.8%。
DeepSeek-R1：数学竞赛（AIME 2024）准确率97.3%，推理延迟<100ms

2）多模态支持

文心4.5：可理解梗图、讽刺漫画，支持超清图像修复（如影视老片修复）
Qwen2.5-VL：支持视频理解（1小时时长）与结构化数据输出（如发票识别）

3）开源与成本优势

DeepSeek-R1：开源且API成本仅为GPT-4的1/50，适合中小企业
CodeGeeX：免费开源，支持VS Code插件，适合教学场景

选型建议🎯速查：

需求场景	推荐模型	理由
企业级复杂应用开发	Gemini 2.5 Pro	多模态+长上下文+代码生成全能型
中文任务与内容生成	文心4.5 / X1	中文理解深度优化，插件生态完善
教育/数学/逻辑推理	DeepSeek-R1	透明推理链+高准确率，开源免费
轻量级代码生成与教学	CodeGeeX	多语言互译+IDE集成，部署门槛低
移动端多模态应用	Qwen2.5-Omni	7B参数轻量化，全模态支持

注：以上数据综合自2025年最新技术报告与厂商发布信息，部分模型细节（如参数量）未完全公开。实际选型需结合硬件条件与任务复杂度，例如70B+模型需专业GPU集群，而7B级模型可运行于消费级显卡。

测试与优化

测试矩阵：

测试类型	AI辅助方式	工具链
平衡性测试	蒙特卡洛模拟器（1000局/分钟）	自建Python服务
性能监控	实时帧率预测+热力图分析	Chrome Lighthouse
兼容性测试	自动跨浏览器渲染检测	BrowserStack+Selenium
用户行为分析	玩家操作聚类模型	TensorFlow.js