Cocos Creator 3.x 项目上架前必做：一键生成五种尺寸图标并替换APP图标的懒人教程-洪萨配资

Cocos Creator 3.x 项目上架前必做：一键生成五种尺寸图标并替换APP图标的懒人教程

当你完成了一个精彩的Cocos Creator游戏开发，准备在TapTap等平台发布时，APP图标可能是最容易被忽视却至关重要的环节。一个专业、适配各种尺寸的图标不仅能提升应用商店的展示效果，还能避免因图标不规范导致的审核问题。本文将分享一套高效的工作流，让你在5分钟内完成所有图标尺寸的生成和替换。

1. 为什么需要五种尺寸的图标？

安卓系统对应用图标有着严格的多尺寸要求，主要原因是：

不同设备密度：从低密度手机到4K平板，系统会根据屏幕DPI自动选择最合适的图标
系统界面适配：应用列表、桌面、设置界面等不同场景需要不同大小的图标
商店展示需求：应用商店会抓取不同分辨率的图标用于各种展示位

以下是必须准备的五种标准尺寸及其用途：

尺寸(px)	密度类型	主要使用场景
72×72	hdpi	普通手机应用列表
48×48	mdpi	小尺寸设备及系统界面
96×96	xhdpi	主流高清手机
144×144	xxhdpi	2K屏设备
192×192	xxxhdpi	4K设备及应用商店主展示

2. 一键生成多尺寸图标的三种方案

2.1 使用在线工具批量生成（推荐新手）

改图宝是最简单的解决方案：

访问改图宝官网
上传你的原始图标（建议1024×1024以上）
在"批量修改尺寸"功能中依次添加五个目标尺寸
设置输出格式为PNG（必须透明背景）
点击"开始生成"并下载ZIP包

注意：确保原始图标有足够的细节，缩小后仍能清晰辨认核心元素

2.2 使用Photoshop动作脚本

如果你熟悉PS，可以创建自动化动作：

// Photoshop脚本示例 var sizes = [72, 48, 96, 144, 192]; var doc = app.activeDocument; var folder = Folder.selectDialog("选择输出目录"); for(var i=0; i<sizes.length; i++){ var newDoc = doc.duplicate(); newDoc.resizeImage(sizes[i], sizes[i], 300, ResampleMethod.BICUBICSHARPER); var saveFile = new File(folder.fsName + "/icon_" + sizes[i] + "x" + sizes[i] + ".png"); SavePNG(newDoc, saveFile); newDoc.close(); } function SavePNG(doc, file){ var opts = new PNGSaveOptions(); opts.compression = 9; opts.interlaced = false; doc.saveAs(file, opts); }

2.3 Cocos项目自动化脚本

在项目根目录创建generate_icons.js：

const sharp = require('sharp'); const fs = require('fs'); const path = require('path'); const inputIcon = './assets/textures/icon.png'; // 你的原始图标路径 const outputDir = './native/engine/android/res/'; const sizes = [ {name: 'mipmap-hdpi', size: 72}, {name: 'mipmap-mdpi', size: 48}, {name: 'mipmap-xhdpi', size: 96}, {name: 'mipmap-xxhdpi', size: 144}, {name: 'mipmap-xxxhdpi', size: 192} ]; async function generateIcons() { try { const image = sharp(inputIcon); for (const item of sizes) { const dir = path.join(outputDir, item.name); if (!fs.existsSync(dir)) fs.mkdirSync(dir, {recursive: true}); await image .resize(item.size, item.size) .toFile(path.join(dir, 'ic_launcher.png')); console.log(`Generated ${item.name} icon`); } } catch (err) { console.error('Error generating icons:', err); } } generateIcons();

运行前需安装sharp库：

npm install sharp --save-dev

3. 图标替换的精准操作流程

生成的图标需要放入正确目录：

打开项目中的native/engine/android/res目录

你会看到五个mipmap文件夹：

mipmap-hdpi/ mipmap-mdpi/ mipmap-xhdpi/ mipmap-xxhdpi/ mipmap-xxxhdpi/

将对应尺寸的图标重命名为ic_launcher.png替换原文件

重要：必须保持文件名一致，Android系统通过固定名称识别图标

4. 验证图标替换效果的三种方法

4.1 Android Studio实时预览

在Android Studio中打开res目录
右键点击任意mipmap文件夹
选择"Preview"选项查看所有密度下的显示效果

4.2 使用模拟器多设备测试

# 启动不同DPI的模拟器 emulator -avd Pixel_3_API_30 -skin 1080x1920 -dpi-device 420 emulator -avd Nexus_7_API_28 -skin 1200x1920 -dpi-device 320

4.3 APK分析工具检查

使用Android SDK自带的aapt工具：

aapt dump badging your_app.apk | grep icon

应该看到类似输出：

application-icon-120:'res/mipmap-hdpi/ic_launcher.png' application-icon-160:'res/mipmap-mdpi/ic_launcher.png' application-icon-240:'res/mipmap-xhdpi/ic_launcher.png'

5. 高级技巧：自适应图标与圆形/方形适配

从Android 8.0开始，系统支持自适应图标：

在res/mipmap-anydpi-v26/目录创建ic_launcher.xml：

<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background"/> <foreground android:drawable="@drawable/ic_launcher_foreground"/> </adaptive-icon>

准备两张1024×1024的图层：
- 背景层（纯色或简单图案）
- 前景层（主要图标元素）

为各密度生成两种资源：

drawable-hdpi/ic_launcher_background.png drawable-hdpi/ic_launcher_foreground.png

这种方案能让图标在不同厂商的桌面上保持统一风格，避免被强制裁剪成圆形或方形。

6. 常见问题排查

图标显示为默认Android机器人：

检查文件名是否完全匹配ic_launcher.png
确认图片已正确复制到所有密度目录
清理项目后重新构建：Build > Clean Project

图标边缘出现白边：

确保使用透明背景的PNG格式
检查图片实际内容是否填满画布
在PS中开启"对齐像素网格"功能

商店审核提示图标分辨率不足：

确认xxxhdpi版本使用192×192尺寸
原始设计稿至少需要512×512分辨率
避免在图标中使用细于3px的线条

在实际项目中，我习惯将图标生成脚本集成到构建流程中，这样每次发布时都会自动检查并更新图标资源。对于团队协作项目，可以在Git hooks中添加图标校验步骤，确保所有成员提交的资源都符合规范。

Cocos Creator 3.x 项目上架前必做：一键生成五种尺寸图标并替换APP图标的懒人教程