davidkotnik/novafarma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FAZA 2: Player entity with WASD movement, walking animation, and camera follow - Ready for testing

Browse Source
This commit is contained in:
NovaFarma Dev
2025-12-06 18:00:59 +01:00
parent 7e6cc85a6f
commit 3086356171
6 changed files with 641 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/utils/TextureGenerator.js Normal file
View File

@@ -0,0 +1,200 @@
// Texture Generator
// Proceduralno generiranje tekstur in sprite-ov
class TextureGenerator {
// Generiraj player sprite (32x32px pixel art)
static createPlayerSprite(scene, key = 'player') {
const size = 32;
const canvas = scene.textures.createCanvas(key, size, size);
const ctx = canvas.getContext();
// Clear
ctx.clearRect(0, 0, size, size);
// Barve
const skinColor = '#FFDBAC';
const hatColor = '#F4E7C6';
const shirtColor = '#5CB85C';
const pantsColor = '#8B6F47';
const outlineColor = '#000000';
// Funkcija za risanje piksla
const pixel = (x, y, color) => {
ctx.fillStyle = color;
ctx.fillRect(x, y, 1, 1);
};
// Offset za centriranje
const ox = 12;
const oy = 4;
// Outline + Hat (8 pixel širok)
// Vrh klobuka
for (let x = 0; x < 8; x++) {
pixel(ox + x, oy + 0, outlineColor);
pixel(ox + x, oy + 1, hatColor);
pixel(ox + x, oy + 2, hatColor);
}
// Glava (6 pixel široka)
for (let y = 3; y < 6; y++) {
pixel(ox + 0, oy + y, outlineColor);
for (let x = 1; x < 7; x++) {
pixel(ox + x, oy + y, skinColor);
}
pixel(ox + 7, oy + y, outlineColor);
}
// Oči (črni piksli)
pixel(ox + 2, oy + 4, outlineColor);
pixel(ox + 5, oy + 4, outlineColor);
// Telo - srajca (6 pixel široka)
for (let y = 6; y < 11; y++) {
pixel(ox + 0, oy + y, outlineColor);
for (let x = 1; x < 7; x++) {
pixel(ox + x, oy + y, shirtColor);
}
pixel(ox + 7, oy + y, outlineColor);
}
// Roke (stranske)
for (let y = 7; y < 10; y++) {
// Leva roka
pixel(ox - 1, oy + y, skinColor);
pixel(ox - 2, oy + y, outlineColor);
// Desna roka
pixel(ox + 8, oy + y, skinColor);
pixel(ox + 9, oy + y, outlineColor);
}
// Noge - hlače (vsaka noga 3 piksle široka)
for (let y = 11; y < 16; y++) {
// Leva noga
pixel(ox + 0, oy + y, outlineColor);
pixel(ox + 1, oy + y, pantsColor);
pixel(ox + 2, oy + y, pantsColor);
pixel(ox + 3, oy + y, outlineColor);
// Desna noga
pixel(ox + 4, oy + y, outlineColor);
pixel(ox + 5, oy + y, pantsColor);
pixel(ox + 6, oy + y, pantsColor);
pixel(ox + 7, oy + y, outlineColor);
}
// Dno nog
for (let x = 0; x < 8; x++) {
pixel(ox + x, oy + 16, outlineColor);
}
canvas.refresh();
return canvas;
}
// Generiraj walking animacijo (4 frame-i)
static createPlayerWalkSprite(scene, key = 'player_walk') {
const frameWidth = 32;
const frameHeight = 32;
const frameCount = 4;
const canvas = scene.textures.createCanvas(key, frameWidth * frameCount, frameHeight);
const ctx = canvas.getContext();
// Frame 0: Idle (osnovni sprite)
this.drawPlayerFrame(ctx, 0, 0, 0);
// Frame 1: Left foot forward
this.drawPlayerFrame(ctx, frameWidth, 0, 1);
// Frame 2: Idle
this.drawPlayerFrame(ctx, frameWidth * 2, 0, 0);
// Frame 3: Right foot forward
this.drawPlayerFrame(ctx, frameWidth * 3, 0, 2);
canvas.refresh();
return canvas;
}
// Pomožna funkcija za risanje player frame-a
static drawPlayerFrame(ctx, offsetX, offsetY, frame) {
const size = 32;
// Barve
const skinColor = '#FFDBAC';
const hatColor = '#F4E7C6';
const shirtColor = '#5CB85C';
const pantsColor = '#8B6F47';
const outlineColor = '#000000';
const pixel = (x, y, color) => {
ctx.fillStyle = color;
ctx.fillRect(offsetX + x, offsetY + y, 1, 1);
};
const ox = 12;
const oy = 4;
// Klobuk
for (let x = 0; x < 8; x++) {
pixel(ox + x, oy + 0, outlineColor);
pixel(ox + x, oy + 1, hatColor);
pixel(ox + x, oy + 2, hatColor);
}
// Glava
for (let y = 3; y < 6; y++) {
pixel(ox + 0, oy + y, outlineColor);
for (let x = 1; x < 7; x++) {
pixel(ox + x, oy + y, skinColor);
}
pixel(ox + 7, oy + y, outlineColor);
}
pixel(ox + 2, oy + 4, outlineColor);
pixel(ox + 5, oy + 4, outlineColor);
// Telo
for (let y = 6; y < 11; y++) {
pixel(ox + 0, oy + y, outlineColor);
for (let x = 1; x < 7; x++) {
pixel(ox + x, oy + y, shirtColor);
}
pixel(ox + 7, oy + y, outlineColor);
}
// Roke
for (let y = 7; y < 10; y++) {
pixel(ox - 1, oy + y, skinColor);
pixel(ox - 2, oy + y, outlineColor);
pixel(ox + 8, oy + y, skinColor);
pixel(ox + 9, oy + y, outlineColor);
}
// Noge - prilagojeno glede na frame (walking animation)
let legOffset = 0;
if (frame === 1) legOffset = -1; // Left foot forward
if (frame === 2) legOffset = 1; // Right foot forward
for (let y = 11; y < 16; y++) {
const leftShift = (frame === 1) ? 0 : 0;
const rightShift = (frame === 2) ? 0 : 0;
// Leva noga
pixel(ox + 0, oy + y, outlineColor);
pixel(ox + 1, oy + y, pantsColor);
pixel(ox + 2, oy + y, pantsColor);
pixel(ox + 3, oy + y, outlineColor);
// Desna noga
pixel(ox + 4, oy + y, outlineColor);
pixel(ox + 5, oy + y, pantsColor);
pixel(ox + 6, oy + y, pantsColor);
pixel(ox + 7, oy + y, outlineColor);
}
for (let x = 0; x < 8; x++) {
pixel(ox + x, oy + 16, outlineColor);
}
}
}