274 lines
9.4 KiB
JavaScript
274 lines
9.4 KiB
JavaScript
// Preload Scene - Nalaganje assetov
|
|
class PreloadScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'PreloadScene' });
|
|
}
|
|
|
|
preload() {
|
|
console.log('⏳ PreloadScene: Loading assets...');
|
|
|
|
this.createLoadingBar();
|
|
|
|
// Load ALL custom sprites
|
|
this.load.image('player_sprite', 'assets/player_sprite.png');
|
|
this.load.image('zombie_sprite', 'assets/zombie_sprite.png');
|
|
this.load.image('merchant_sprite', 'assets/merchant_sprite.png');
|
|
this.load.image('house_sprite', 'assets/house_sprite.png');
|
|
this.load.image('stone_sprite', 'assets/stone_sprite.png');
|
|
this.load.image('tree_sprite', 'assets/tree_sprite.png');
|
|
this.load.image('grass_sprite', 'assets/grass_sprite.png');
|
|
this.load.image('grass_tile', 'assets/grass_tile.png');
|
|
this.load.image('leaf_sprite', 'assets/leaf_sprite.png');
|
|
this.load.image('wheat_sprite', 'assets/wheat_sprite.png');
|
|
this.load.image('stone_texture', 'assets/stone_texture.png');
|
|
|
|
// New asset packs
|
|
this.load.image('objects_pack', 'assets/objects_pack.png');
|
|
this.load.image('walls_pack', 'assets/walls_pack.png');
|
|
this.load.image('ground_tiles', 'assets/ground_tiles.png');
|
|
this.load.image('objects_pack2', 'assets/objects_pack2.png');
|
|
this.load.image('trees_vegetation', 'assets/trees_vegetation.png');
|
|
|
|
// User-uploaded pixel art assets (original)
|
|
this.load.image('flowers', 'assets/flowers.png');
|
|
this.load.image('tree_green', 'assets/tree_green.png');
|
|
this.load.image('tree_blue', 'assets/tree_blue.png');
|
|
this.load.image('tree_dead', 'assets/tree_dead.png');
|
|
this.load.image('rock_asset', 'assets/rock_asset.png');
|
|
|
|
// NEW transparent tree/rock assets
|
|
this.load.image('tree_blue_new', 'assets/tree_blue_new.png');
|
|
this.load.image('tree_green_new', 'assets/tree_green_new.png');
|
|
this.load.image('rock_1', 'assets/rock_1.png');
|
|
this.load.image('rock_2', 'assets/rock_2.png');
|
|
this.load.image('tree_dead_new', 'assets/tree_dead_new.png');
|
|
this.load.image('flowers_new', 'assets/flowers_new.png');
|
|
this.load.image('hill_sprite', 'assets/hill_sprite.png');
|
|
this.load.image('fence', 'assets/fence.png');
|
|
this.load.image('gravestone', 'assets/gravestone.png');
|
|
|
|
// Voxel stil asset-i (2.5D)
|
|
this.load.image('tree_voxel_green', 'assets/tree_voxel_green.png');
|
|
this.load.image('tree_voxel_blue', 'assets/tree_voxel_blue.png');
|
|
this.load.image('tree_voxel_dead', 'assets/tree_voxel_dead.png');
|
|
this.load.image('rock_voxel', 'assets/rock_voxel.png');
|
|
|
|
// Wait for load completion then process transparency
|
|
this.load.once('complete', () => {
|
|
this.processAllTransparency();
|
|
this.createAnimations();
|
|
});
|
|
|
|
// New Processed Animations (Standardized 64x64 strips)
|
|
this.load.spritesheet('player_walk', 'assets/sprites/player_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
|
|
this.load.spritesheet('zombie_walk', 'assets/sprites/zombie_walk_strip.png', { frameWidth: 64, frameHeight: 64 });
|
|
}
|
|
|
|
createAnimations() {
|
|
if (this.anims.exists('player_walk_anim')) return;
|
|
|
|
this.anims.create({
|
|
key: 'player_walk_anim',
|
|
frames: this.anims.generateFrameNumbers('player_walk', { start: 0, end: 5 }),
|
|
frameRate: 12,
|
|
repeat: -1
|
|
});
|
|
|
|
this.anims.create({
|
|
key: 'zombie_walk_anim',
|
|
frames: this.anims.generateFrameNumbers('zombie_walk', { start: 0, end: 5 }),
|
|
frameRate: 8,
|
|
repeat: -1
|
|
});
|
|
console.log('🎞️ Animations created!');
|
|
}
|
|
|
|
processAllTransparency() {
|
|
// Process ALL sprites to remove backgrounds
|
|
const spritesToProcess = [
|
|
'player_sprite',
|
|
'zombie_sprite',
|
|
'merchant_sprite',
|
|
'house_sprite',
|
|
'stone_sprite',
|
|
'tree_sprite',
|
|
'grass_sprite',
|
|
'leaf_sprite',
|
|
'wheat_sprite',
|
|
'stone_texture',
|
|
// New pixel art assets
|
|
'flowers',
|
|
'tree_green',
|
|
'tree_blue',
|
|
'tree_dead',
|
|
'rock_asset',
|
|
// NEW transparent assets
|
|
'tree_blue_new',
|
|
'tree_green_new',
|
|
'rock_1',
|
|
'rock_2',
|
|
'tree_dead_new',
|
|
'flowers_new',
|
|
'hill_sprite',
|
|
'fence',
|
|
'gravestone',
|
|
// Voxel stil
|
|
'tree_voxel_green',
|
|
'tree_voxel_blue',
|
|
'tree_voxel_dead',
|
|
'rock_voxel'
|
|
];
|
|
|
|
spritesToProcess.forEach(spriteKey => {
|
|
this.processSpriteTransparency(spriteKey);
|
|
});
|
|
|
|
console.log('✅ All sprites transparency processed!');
|
|
}
|
|
|
|
processSpriteTransparency(spriteKey) {
|
|
if (!this.textures.exists(spriteKey)) return;
|
|
|
|
const texture = this.textures.get(spriteKey);
|
|
const source = texture.getSourceImage();
|
|
|
|
// Create canvas to process image
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = source.width;
|
|
canvas.height = source.height;
|
|
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
|
|
|
// Draw original image
|
|
ctx.drawImage(source, 0, 0);
|
|
|
|
// Get image data
|
|
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
const data = imageData.data;
|
|
|
|
// Remove backgrounds
|
|
for (let i = 0; i < data.length; i += 4) {
|
|
const r = data[i];
|
|
const g = data[i + 1];
|
|
const b = data[i + 2];
|
|
|
|
// Remove white/light gray backgrounds (all sprites)
|
|
if (r > 200 && g > 200 && b > 200) {
|
|
data[i + 3] = 0;
|
|
}
|
|
|
|
// Special: Remove brown/tan backgrounds (merchant sprite)
|
|
if (spriteKey === 'merchant_sprite') {
|
|
// Brown detection: R > G > B, warm tones
|
|
const isBrown = r > 100 && r > g && g > b && (r - b) > 40;
|
|
if (isBrown) {
|
|
data[i + 3] = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Put processed data back
|
|
ctx.putImageData(imageData, 0, 0);
|
|
|
|
// Create new texture from processed canvas
|
|
this.textures.remove(spriteKey);
|
|
this.textures.addCanvas(spriteKey, canvas);
|
|
}
|
|
|
|
createLoadingBar() {
|
|
const width = this.cameras.main.width;
|
|
const height = this.cameras.main.height;
|
|
|
|
const progressBar = this.add.graphics();
|
|
const progressBox = this.add.graphics();
|
|
progressBox.fillStyle(0x222222, 0.8);
|
|
progressBox.fillRect(width / 2 - 160, height / 2 - 25, 320, 50);
|
|
|
|
const loadingText = this.add.text(width / 2, height / 2 - 50, 'Loading NovaFarma...', {
|
|
font: '20px Courier New',
|
|
fill: '#ffffff'
|
|
});
|
|
loadingText.setOrigin(0.5, 0.5);
|
|
|
|
const percentText = this.add.text(width / 2, height / 2, '0%', {
|
|
font: '18px Courier New',
|
|
fill: '#ffffff'
|
|
});
|
|
percentText.setOrigin(0.5, 0.5);
|
|
|
|
this.load.on('progress', (value) => {
|
|
percentText.setText(parseInt(value * 100) + '%');
|
|
progressBar.clear();
|
|
progressBar.fillStyle(0x00ff00, 1); // Matrix Green
|
|
progressBar.fillRect(width / 2 - 150, height / 2 - 15, 300 * value, 30);
|
|
});
|
|
|
|
this.load.on('complete', () => {
|
|
progressBar.destroy();
|
|
progressBox.destroy();
|
|
loadingText.destroy();
|
|
percentText.destroy();
|
|
});
|
|
}
|
|
|
|
create() {
|
|
console.log('✅ PreloadScene: Assets loaded!');
|
|
window.gameState.currentScene = 'PreloadScene';
|
|
|
|
const width = this.cameras.main.width;
|
|
const height = this.cameras.main.height;
|
|
|
|
const title = this.add.text(width / 2, height / 2 - 50, 'KRVAVA ŽETEV', {
|
|
fontFamily: 'Courier New',
|
|
fontSize: '48px',
|
|
fill: '#ff0000',
|
|
fontStyle: 'bold',
|
|
stroke: '#000000',
|
|
strokeThickness: 6
|
|
});
|
|
title.setOrigin(0.5);
|
|
|
|
const subtitle = this.add.text(width / 2, height / 2 + 10, 'Zombie Roots', {
|
|
fontFamily: 'Courier New',
|
|
fontSize: '24px',
|
|
fill: '#00ff41'
|
|
});
|
|
subtitle.setOrigin(0.5);
|
|
|
|
const instruction = this.add.text(width / 2, height / 2 + 60, 'Press SPACE to start', {
|
|
fontFamily: 'Courier New',
|
|
fontSize: '16px',
|
|
fill: '#888888'
|
|
});
|
|
instruction.setOrigin(0.5);
|
|
|
|
this.tweens.add({
|
|
targets: instruction,
|
|
alpha: 0.3,
|
|
duration: 800,
|
|
yoyo: true,
|
|
repeat: -1
|
|
});
|
|
|
|
const startGame = () => {
|
|
console.log('🎮 Starting StoryScene...');
|
|
this.input.keyboard.off('keydown');
|
|
this.input.off('pointerdown');
|
|
this.scene.start('StoryScene');
|
|
};
|
|
|
|
this.time.delayedCall(3000, () => {
|
|
startGame();
|
|
});
|
|
|
|
this.input.keyboard.on('keydown', (event) => {
|
|
if (event.code === 'Space' || event.code === 'Enter') {
|
|
startGame();
|
|
}
|
|
});
|
|
|
|
this.input.on('pointerdown', () => {
|
|
startGame();
|
|
});
|
|
}
|
|
}
|