feat(game): 实现精灵图渲染优化游戏性能

- 新增 AnimalSpriteImage 组件用于精灵图渲染
- 集成精灵图渲染到桌面版动物组件
- 集成精灵图渲染到移动版动物组件
- 重构历史记录组件使用精灵图渲染
- 更新动物覆盖层组件使用精灵图渲染
- 移除旧的单个图片资源引用
- 添加精灵图生成脚本和相关配置
- 优化启动资源加载排除精灵图源文件
- 添加精灵图位置计算工具函数

src/features/game/components/desktop/desktop-game-history.tsx

@@ -3,9 +3,8 @@ import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import historyBg from '@/assets/system/history-bg.png'
 import { SmartBackground } from '@/components/smart-background.tsx'
-import { SmartImage } from '@/components/smart-image'
 import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
-import { FLOWER_IMAGE_BY_ID } from '@/features/game/shared'
+import { RewardSpriteImage } from '@/features/game/components/shared/reward-sprite-image'
 import { useGameHistoryVm } from '@/hooks/use-game-history-vm.ts'
 
 function HistoryRewardNumber({
@@ -15,10 +14,9 @@ function HistoryRewardNumber({
   className?: string
   number: number
 }) {
-  const image = FLOWER_IMAGE_BY_ID[number]
   const label = String(number).padStart(2, '0')
 
-  if (!image?.rewardUrl) {
+  if (!Number.isInteger(number) || number < 1 || number > 36) {
     return (
       <span
         className={`inline-flex h-design-38 min-w-design-38 shrink-0 items-center justify-center px-design-5 text-design-15 font-bold text-[#D5FBFF] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(75,233,255,0.12),0_0_calc(var(--design-unit)*10)_rgba(75,233,255,0.1)] align-middle ${className ?? ''}`}
@@ -33,12 +31,10 @@ function HistoryRewardNumber({
       className={`inline-flex h-design-38 w-design-38 shrink-0 items-center justify-center p-design-1 align-middle ${className ?? ''}`}
       title={label}
     >
-      <SmartImage
-        src={image.rewardUrl}
+      <RewardSpriteImage
+        rewardId={number}
         alt={label}
-        showSkeleton={false}
-        className="h-full w-full overflow-visible"
-        imgClassName="object-contain"
+        className="h-full w-full"
       />
     </span>
   )