feat(tilemap): 增强tilemap编辑器和动画系统
This commit is contained in:
yhh
@@ -3,10 +3,12 @@
|
||||
* 瓦片集选择面板 - 左侧面板用于选择瓦片
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Paintbrush, Eraser, PaintBucket, ChevronDown, Grid3x3, Search } from 'lucide-react';
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import { Paintbrush, Eraser, PaintBucket, ChevronDown, Grid3x3, Search, Box, Square, BoxSelect } from 'lucide-react';
|
||||
import { useTilemapEditorStore, type TilemapToolType } from '../../stores/TilemapEditorStore';
|
||||
import { TilesetPreview } from '../TilesetPreview';
|
||||
import { TileAnimationEditor } from './TileAnimationEditor';
|
||||
import type { ITilesetData, ITileAnimation } from '@esengine/tilemap';
|
||||
import '../../styles/TileSetSelectorPanel.css';
|
||||
|
||||
interface TilesetOption {
|
||||
@@ -17,15 +19,21 @@ interface TilesetOption {
|
||||
interface TileSetSelectorPanelProps {
|
||||
tilesets: TilesetOption[];
|
||||
activeTilesetIndex: number;
|
||||
activeTileset?: ITilesetData;
|
||||
tilesetImage?: HTMLImageElement | null;
|
||||
onTilesetChange: (index: number) => void;
|
||||
onAddTileset: () => void;
|
||||
onTileAnimationChange?: (tileId: number, animation: ITileAnimation | null) => void;
|
||||
}
|
||||
|
||||
export const TileSetSelectorPanel: React.FC<TileSetSelectorPanelProps> = ({
|
||||
tilesets,
|
||||
activeTilesetIndex,
|
||||
activeTileset,
|
||||
tilesetImage,
|
||||
onTilesetChange,
|
||||
onAddTileset
|
||||
onAddTileset,
|
||||
onTileAnimationChange
|
||||
}) => {
|
||||
const {
|
||||
currentTool,
|
||||
@@ -35,26 +43,93 @@ export const TileSetSelectorPanel: React.FC<TileSetSelectorPanelProps> = ({
|
||||
tileHeight,
|
||||
tilesetColumns,
|
||||
tilesetRows,
|
||||
selectedTiles
|
||||
selectedTiles,
|
||||
editingCollision,
|
||||
setEditingCollision
|
||||
} = useTilemapEditorStore();
|
||||
|
||||
const [showTilesetDropdown, setShowTilesetDropdown] = useState(false);
|
||||
const [previewZoom, setPreviewZoom] = useState(1);
|
||||
const [editingAnimationTileId, setEditingAnimationTileId] = useState<number | null>(null);
|
||||
|
||||
// Get animated tile IDs from tileset
|
||||
const animatedTileIds = useMemo(() => {
|
||||
const ids = new Set<number>();
|
||||
if (activeTileset?.tiles) {
|
||||
for (const tile of activeTileset.tiles) {
|
||||
if (tile.animation && tile.animation.frames.length > 0) {
|
||||
ids.add(tile.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
return ids;
|
||||
}, [activeTileset]);
|
||||
|
||||
// Get current animation for editing tile
|
||||
const editingTileAnimation = useMemo(() => {
|
||||
if (editingAnimationTileId === null || !activeTileset?.tiles) return null;
|
||||
const tile = activeTileset.tiles.find(t => t.id === editingAnimationTileId);
|
||||
return tile?.animation ?? null;
|
||||
}, [editingAnimationTileId, activeTileset]);
|
||||
|
||||
const handleEditAnimation = useCallback((tileId: number) => {
|
||||
setEditingAnimationTileId(tileId);
|
||||
}, []);
|
||||
|
||||
const handleAnimationChange = useCallback((animation: ITileAnimation | null) => {
|
||||
if (editingAnimationTileId !== null && onTileAnimationChange) {
|
||||
onTileAnimationChange(editingAnimationTileId, animation);
|
||||
}
|
||||
}, [editingAnimationTileId, onTileAnimationChange]);
|
||||
|
||||
const handleCloseAnimationEditor = useCallback(() => {
|
||||
setEditingAnimationTileId(null);
|
||||
}, []);
|
||||
|
||||
const handleToolChange = useCallback((tool: TilemapToolType) => {
|
||||
setCurrentTool(tool);
|
||||
}, [setCurrentTool]);
|
||||
|
||||
const activeTileset = tilesets[activeTilesetIndex];
|
||||
const { setShowCollision } = useTilemapEditorStore();
|
||||
|
||||
const handleToggleCollisionMode = useCallback((enabled: boolean) => {
|
||||
setEditingCollision(enabled);
|
||||
// 启用碰撞编辑时自动显示碰撞
|
||||
if (enabled) {
|
||||
setShowCollision(true);
|
||||
}
|
||||
}, [setEditingCollision, setShowCollision]);
|
||||
|
||||
const activeTilesetOption = tilesets[activeTilesetIndex];
|
||||
|
||||
return (
|
||||
<div className="tileset-selector-panel">
|
||||
{/* Mode toggle */}
|
||||
<div className="tileset-mode-toggle">
|
||||
<button
|
||||
className={`mode-toggle-btn ${!editingCollision ? 'active' : ''}`}
|
||||
onClick={() => handleToggleCollisionMode(false)}
|
||||
title="瓦片编辑模式"
|
||||
>
|
||||
<Paintbrush size={14} />
|
||||
<span>瓦片</span>
|
||||
</button>
|
||||
<button
|
||||
className={`mode-toggle-btn ${editingCollision ? 'active' : ''}`}
|
||||
onClick={() => handleToggleCollisionMode(true)}
|
||||
title="碰撞编辑模式"
|
||||
>
|
||||
<Box size={14} />
|
||||
<span>碰撞</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tool buttons */}
|
||||
<div className="tileset-tools">
|
||||
<button
|
||||
className={`tileset-tool-btn ${currentTool === 'brush' ? 'active' : ''}`}
|
||||
onClick={() => handleToolChange('brush')}
|
||||
title="绘制"
|
||||
title={editingCollision ? "绘制碰撞" : "绘制瓦片"}
|
||||
>
|
||||
<Paintbrush size={24} />
|
||||
<span>绘制</span>
|
||||
@@ -62,7 +137,7 @@ export const TileSetSelectorPanel: React.FC<TileSetSelectorPanelProps> = ({
|
||||
<button
|
||||
className={`tileset-tool-btn ${currentTool === 'eraser' ? 'active' : ''}`}
|
||||
onClick={() => handleToolChange('eraser')}
|
||||
title="橡皮擦"
|
||||
title={editingCollision ? "擦除碰撞" : "擦除瓦片"}
|
||||
>
|
||||
<Eraser size={24} />
|
||||
<span>橡皮擦</span>
|
||||
@@ -70,11 +145,27 @@ export const TileSetSelectorPanel: React.FC<TileSetSelectorPanelProps> = ({
|
||||
<button
|
||||
className={`tileset-tool-btn ${currentTool === 'fill' ? 'active' : ''}`}
|
||||
onClick={() => handleToolChange('fill')}
|
||||
title="填充"
|
||||
title={editingCollision ? "填充碰撞" : "填充瓦片"}
|
||||
>
|
||||
<PaintBucket size={24} />
|
||||
<span>填充</span>
|
||||
</button>
|
||||
<button
|
||||
className={`tileset-tool-btn ${currentTool === 'rectangle' ? 'active' : ''}`}
|
||||
onClick={() => handleToolChange('rectangle')}
|
||||
title={editingCollision ? "矩形碰撞" : "矩形绘制"}
|
||||
>
|
||||
<Square size={24} />
|
||||
<span>矩形</span>
|
||||
</button>
|
||||
<button
|
||||
className={`tileset-tool-btn ${currentTool === 'select' ? 'active' : ''}`}
|
||||
onClick={() => handleToolChange('select')}
|
||||
title="选择区域"
|
||||
>
|
||||
<BoxSelect size={24} />
|
||||
<span>选择</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active Tile Set selector */}
|
||||
@@ -95,7 +186,7 @@ export const TileSetSelectorPanel: React.FC<TileSetSelectorPanelProps> = ({
|
||||
className="tileset-dropdown-btn"
|
||||
onClick={() => setShowTilesetDropdown(!showTilesetDropdown)}
|
||||
>
|
||||
<span>{activeTileset?.name || '(无)'}</span>
|
||||
<span>{activeTilesetOption?.name || '(无)'}</span>
|
||||
<ChevronDown size={14} />
|
||||
</button>
|
||||
{showTilesetDropdown && (
|
||||
@@ -144,13 +235,23 @@ export const TileSetSelectorPanel: React.FC<TileSetSelectorPanelProps> = ({
|
||||
|
||||
{/* Tile preview area */}
|
||||
<div className="tileset-preview-area">
|
||||
{tilesetImageUrl ? (
|
||||
{editingCollision ? (
|
||||
<div className="collision-mode-hint">
|
||||
<Box size={32} />
|
||||
<span className="collision-mode-title">碰撞编辑模式</span>
|
||||
<span className="collision-mode-desc">使用画笔绘制碰撞区域</span>
|
||||
<span className="collision-mode-desc">使用橡皮擦清除碰撞</span>
|
||||
</div>
|
||||
) : tilesetImageUrl ? (
|
||||
<TilesetPreview
|
||||
imageUrl={tilesetImageUrl}
|
||||
tileWidth={tileWidth}
|
||||
tileHeight={tileHeight}
|
||||
columns={tilesetColumns}
|
||||
rows={tilesetRows}
|
||||
tileset={activeTileset}
|
||||
animatedTileIds={animatedTileIds}
|
||||
onEditAnimation={handleEditAnimation}
|
||||
/>
|
||||
) : (
|
||||
<div className="tileset-empty-hint">
|
||||
@@ -167,6 +268,18 @@ export const TileSetSelectorPanel: React.FC<TileSetSelectorPanelProps> = ({
|
||||
已选择: {selectedTiles.width}×{selectedTiles.height}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Animation Editor */}
|
||||
{editingAnimationTileId !== null && activeTileset && tilesetImage && (
|
||||
<TileAnimationEditor
|
||||
tileId={editingAnimationTileId}
|
||||
tileset={activeTileset}
|
||||
tilesetImage={tilesetImage}
|
||||
animation={editingTileAnimation}
|
||||
onAnimationChange={handleAnimationChange}
|
||||
onClose={handleCloseAnimationEditor}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user