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

Cocos Creator 3.x 项目上架前必做一键生成五种尺寸图标并替换APP图标的懒人教程当你完成了一个精彩的Cocos Creator游戏开发准备在TapTap等平台发布时APP图标可能是最容易被忽视却至关重要的环节。一个专业、适配各种尺寸的图标不仅能提升应用商店的展示效果还能避免因图标不规范导致的审核问题。本文将分享一套高效的工作流让你在5分钟内完成所有图标尺寸的生成和替换。1. 为什么需要五种尺寸的图标安卓系统对应用图标有着严格的多尺寸要求主要原因是不同设备密度从低密度手机到4K平板系统会根据屏幕DPI自动选择最合适的图标系统界面适配应用列表、桌面、设置界面等不同场景需要不同大小的图标商店展示需求应用商店会抓取不同分辨率的图标用于各种展示位以下是必须准备的五种标准尺寸及其用途尺寸(px)密度类型主要使用场景72×72hdpi普通手机应用列表48×48mdpi小尺寸设备及系统界面96×96xhdpi主流高清手机144×144xxhdpi2K屏设备192×192xxxhdpi4K设备及应用商店主展示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 i0; isizes.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.jsconst 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-dev3. 图标替换的精准操作流程生成的图标需要放入正确目录打开项目中的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 3204.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.png5. 高级技巧自适应图标与圆形/方形适配从Android 8.0开始系统支持自适应图标在res/mipmap-anydpi-v26/目录创建ic_launcher.xmladaptive-icon xmlns:androidhttp://schemas.android.com/apk/res/android background android:drawabledrawable/ic_launcher_background/ foreground android:drawabledrawable/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中添加图标校验步骤确保所有成员提交的资源都符合规范。