-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor landscape rendering; simplify rendering logic for mountains,…
… snow ground, and trees, and enhance snow ground generation
- Loading branch information
Showing
7 changed files
with
92 additions
and
298 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 13 additions & 49 deletions
62
games/xmas/src/screens/play/game-render/landscape/snow-ground/snow-ground-renderer.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 22 additions & 74 deletions
96
games/xmas/src/screens/play/game-render/landscape/tree/tree-renderer.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,48 @@ | ||
| import { GAME_WORLD_HEIGHT } from '../../../game-world/game-world-consts'; | ||
| import { Tree, TREE_COLORS } from './tree-types'; | ||
| import { ViewportState } from '../../render-state'; | ||
| import { SNOW_GROUND } from '../snow-ground/snow-ground-types'; | ||
| import { Tree, TREE_COLOR } from './tree-types'; | ||
|
|
||
| /** | ||
| * Apply parallax translation to a point based on viewport position and parallax factor | ||
| * Returns pixel-perfect coordinates for smooth rendering | ||
| * Render a single tree using pixel art style | ||
| */ | ||
| function applyParallaxTranslation( | ||
| x: number, | ||
| y: number, | ||
| viewport: ViewportState, | ||
| parallaxFactor: number | ||
| ): { x: number; y: number } { | ||
| return { | ||
| x: Math.round(x + viewport.x * parallaxFactor), | ||
| y: Math.round(y + viewport.y * parallaxFactor) | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Get color for specific tree layer | ||
| */ | ||
| function getLayerColor(layer: number): string { | ||
| return layer === 0 | ||
| ? TREE_COLORS.DISTANT | ||
| : layer === 1 | ||
| ? TREE_COLORS.MIDDLE | ||
| : TREE_COLORS.NEAR; | ||
| } | ||
|
|
||
| /** | ||
| * Render a single tree using pixel art style with parallax effect | ||
| */ | ||
| function renderTree( | ||
| ctx: CanvasRenderingContext2D, | ||
| tree: Tree, | ||
| viewport: ViewportState | ||
| ): void { | ||
| // Calculate base position with parallax | ||
| const basePosition = applyParallaxTranslation( | ||
| tree.x, | ||
| GAME_WORLD_HEIGHT, | ||
| viewport, | ||
| tree.parallaxFactor | ||
| ); | ||
| function renderTree(ctx: CanvasRenderingContext2D, tree: Tree): void { | ||
| // Calculate screen position | ||
| const screenX = Math.round(tree.x); | ||
| const screenY = Math.round(GAME_WORLD_HEIGHT) - GAME_WORLD_HEIGHT * SNOW_GROUND.HEIGHT_RATIO; | ||
|
|
||
| // Calculate tree dimensions | ||
| const width = Math.round(tree.width); | ||
| const height = Math.round(tree.height); | ||
| // Calculate tree points with parallax | ||
| const baseLeft = basePosition.x; | ||
| const baseRight = basePosition.x + width; | ||
| const baseY = basePosition.y; | ||
| const topX = basePosition.x + width / 2; | ||
| const topY = basePosition.y - height; | ||
|
|
||
| // Calculate tree points | ||
| const baseLeft = screenX; | ||
| const baseRight = screenX + width; | ||
| const baseY = screenY; | ||
| const topX = screenX + width / 2; | ||
| const topY = screenY - height; | ||
|
|
||
| // Draw triangular tree shape | ||
| ctx.beginPath(); | ||
| ctx.moveTo(baseLeft, baseY); // Base left | ||
| ctx.lineTo(topX, topY); // Top | ||
| ctx.lineTo(topX, topY); // Top | ||
| ctx.lineTo(baseRight, baseY); // Base right | ||
| ctx.closePath(); | ||
| ctx.fill(); | ||
| } | ||
|
|
||
| /** | ||
| * Render trees by layer with parallax effect | ||
| * Render all trees with uniform appearance | ||
| */ | ||
| export function renderTrees( | ||
| ctx: CanvasRenderingContext2D, | ||
| trees: Tree[], | ||
| viewport: ViewportState | ||
| ): void { | ||
| // Sort trees by layer (back to front) | ||
| const sortedTrees = [...trees].sort((a, b) => a.layer - b.layer); | ||
|
|
||
| // Group trees by layer for efficient rendering | ||
| const treesByLayer = sortedTrees.reduce((acc, tree) => { | ||
| acc[tree.layer] = acc[tree.layer] || []; | ||
| acc[tree.layer].push(tree); | ||
| return acc; | ||
| }, {} as Record<number, Tree[]>); | ||
|
|
||
| export function renderTrees(ctx: CanvasRenderingContext2D, trees: Tree[]): void { | ||
| // Save current context state | ||
| ctx.save(); | ||
|
|
||
| // Render each layer with its color | ||
| Object.entries(treesByLayer).forEach(([layer, layerTrees]) => { | ||
| // Set layer-specific color | ||
| ctx.fillStyle = getLayerColor(Number(layer)); | ||
| // Set tree color | ||
| ctx.fillStyle = TREE_COLOR; | ||
|
|
||
| // Render all trees in this layer | ||
| layerTrees.forEach((tree) => renderTree(ctx, tree, viewport)); | ||
| }); | ||
| // Render all trees | ||
| trees.forEach((tree) => renderTree(ctx, tree)); | ||
|
|
||
| // Restore context state | ||
| ctx.restore(); | ||
| } | ||
| } |
Oops, something went wrong.