113 lines
4.3 KiB
HTML
113 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Style 32 Visual Check</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #111;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
color: #fff;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
canvas {
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
|
border: 1px solid #333;
|
|
}
|
|
</style>
|
|
<script src="node_modules/phaser/dist/phaser.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
const config = {
|
|
type: Phaser.AUTO,
|
|
width: 1280,
|
|
height: 720,
|
|
backgroundColor: '#222',
|
|
// CRITICAL STYLE 32 SETTINGS
|
|
pixelArt: false,
|
|
antialias: true,
|
|
roundPixels: false,
|
|
scene: {
|
|
preload: function () {
|
|
// Load Style 32 Assets
|
|
this.load.image('bg_farm', 'assets/sprites/smooth/kai_style32.png');
|
|
this.load.image('kai_main', 'assets/sprites/smooth/kai_main.png');
|
|
this.load.image('town_preview', 'assets/sprites/smooth/town_style32.png');
|
|
this.load.image('mine_preview', 'assets/sprites/smooth/mine_style32.png');
|
|
},
|
|
create: function () {
|
|
// 1. Background (The Farm Mockup) - Represents "Trava" & Atmosphere
|
|
const bg = this.add.image(640, 360, 'bg_farm');
|
|
bg.setDisplaySize(1280, 720);
|
|
bg.setAlpha(0.6); // Dimmed to show foreground better
|
|
|
|
// 2. Title
|
|
const title = this.add.text(640, 50, 'STYLE 32: SMOOTH VECTOR RENDER', {
|
|
fontSize: '40px',
|
|
fontFamily: 'Arial',
|
|
color: '#00ff00',
|
|
stroke: '#000000',
|
|
strokeThickness: 6
|
|
}).setOrigin(0.5);
|
|
|
|
const subtitle = this.add.text(640, 100, 'Antialias: ON | PixelArt: OFF | 512px Assets', {
|
|
fontSize: '20px',
|
|
color: '#ffffff',
|
|
stroke: '#000000',
|
|
strokeThickness: 4
|
|
}).setOrigin(0.5);
|
|
|
|
// 3. KAI (Style 32 Character)
|
|
const kaiContainer = this.add.container(350, 450);
|
|
const kai = this.add.image(0, 0, 'kai_main');
|
|
kai.setScale(0.8); // Adjusted for view
|
|
// Add Drop Shadow using simple black copy
|
|
const shadow = this.add.image(10, 10, 'kai_main').setTint(0x000000).setAlpha(0.5).setScale(0.8);
|
|
kaiContainer.add([shadow, kai]);
|
|
|
|
// Label
|
|
this.add.text(350, 680, 'KAI (High-Res Vector)', { fontSize: '24px', fontStyle: 'bold' }).setOrigin(0.5).setStroke('#000', 4);
|
|
|
|
// 4. TOWN & ZOMBIE PREVIEWS (Right Side)
|
|
// Use "Vignette" style frame
|
|
const createPreview = (x, y, key, label) => {
|
|
const img = this.add.image(x, y, key);
|
|
img.setDisplaySize(400, 225); // 16:9 ratio small
|
|
|
|
const border = this.add.graphics();
|
|
border.lineStyle(4, 0xffffff, 1);
|
|
border.strokeRect(x - 200, y - 112.5, 400, 225);
|
|
|
|
this.add.text(x, y + 130, label, { fontSize: '18px', color: '#ccc' }).setOrigin(0.5).setStroke('#000', 3);
|
|
|
|
return img;
|
|
};
|
|
|
|
createPreview(950, 250, 'town_preview', 'NOIR TOWN (Detail Check)');
|
|
createPreview(950, 550, 'mine_preview', 'ZOMBIE MINERS (Smooth Line Check)');
|
|
|
|
// 5. ANIMATIONS (Tweening to prove smoothness)
|
|
this.tweens.add({
|
|
targets: kai,
|
|
y: '-=10',
|
|
duration: 2000,
|
|
yoyo: true,
|
|
repeat: -1,
|
|
ease: 'Sine.easeInOut'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
new Phaser.Game(config);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |