Add NPC Sprites (Created by my amazing daughter)

This commit is contained in:
Justin Oros
2026-05-21 15:23:47 -07:00
parent 9337dea191
commit 1e53d2b18d
2 changed files with 13 additions and 11 deletions
+6 -4
View File
@@ -414,8 +414,8 @@ html, body {
#screen-intro { flex-direction:column-reverse; }
.intro-dialog { margin:10px; min-height:90px; }
.intro-npc { position:absolute; right:22%; bottom:30%; font-size:clamp(44px,13vw,64px); animation:npcFloat 2s ease-in-out infinite; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.4)); }
.intro-npc img { height:clamp(44px,13vw,64px); width:auto; image-rendering:pixelated; display:block; }
.intro-npc img { height:clamp(44px,13vw,64px); width:auto; image-rendering:pixelated; display:block; }
.intro-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.intro-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.intro-player {
position: absolute;
left: 22%;
@@ -497,8 +497,10 @@ html, body {
.map-npc-wrap { position:absolute; text-align:center; z-index: 30; }
.npc-bubble { font-size:14px; font-family:var(--font); color:var(--black); background:var(--yellow); border:2px solid var(--black); width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 2px; animation:bounce .7s ease-in-out infinite; }
.map-npc { font-size:clamp(36px,10vw,52px); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); cursor:pointer; animation:npcFloat 2s ease-in-out infinite; }
.map-npc img { height:clamp(36px,10vw,52px); width:auto; image-rendering:pixelated; display:block; }
.map-npc img { height:clamp(36px,10vw,52px); width:auto; image-rendering:pixelated; display:block; }
.map-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.battle-sprite img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.map-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.battle-sprite img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
/* Player is fixed to the viewport centre horizontally; only Y moves */
/* "..." bubble above player when pressing talk away from NPC */
.player-bubble {