ν”Όλ“œλ‘œ λŒμ•„κ°€κΈ°
# βš™οΈ I Spent Months Building a Pixel-Art Universe Called *Cog & Cosmos* 🌌
Dev.toDev.to
Frontend

PixiJS와 break_eternity.js 기반의 μ΄ˆκ±°λŒ€ 숫자 처리 8단계 μƒν˜Έμ—°κ²° μ•„ν‚€ν…μ²˜ κ΅¬ν˜„

# βš™οΈ I Spent Months Building a Pixel-Art Universe Called *Cog & Cosmos* 🌌

Shaan Satsangi2026λ…„ 6μ›” 24일2λΆ„intermediate

AI μš”μ•½

Context

κΈ°μ‘΄ Idle κ²Œμž„μ˜ 단계별 λ‹¨μ ˆ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ λͺ¨λ“  μŠ€ν…Œμ΄μ§€κ°€ μžμ›μ„ κ³΅μœ ν•˜λŠ” μƒν˜Έμ—°κ²° ꡬ쑰 섀계 ν•„μš”. μ›Ή ν™˜κ²½μ—μ„œ μ²œλ¬Έν•™μ  λ‹¨μœ„μ˜ 숫자λ₯Ό μ •λ°€ν•˜κ²Œ μ²˜λ¦¬ν•˜κ³  λ Œλ”λ§ μ„±λŠ₯을 μœ μ§€ν•΄μ•Ό ν•˜λŠ” μ œμ•½ 사항 쑴재.

Technical Solution

  • PixiJS v8 기반의 λ Œλ”λ§ 엔진 채택을 ν†΅ν•œ 저사양 κΈ°κΈ° 및 λͺ¨λ°”일 ν™˜κ²½μ˜ Pixel-art μ΅œμ ν™”
  • break_eternity.js 라이브러리 λ„μž…μœΌλ‘œ IEEE 754 ν‘œμ€€μ„ μ΄ˆκ³Όν•˜λŠ” Big-number μ—°μ‚°μ˜ 정밀도 확보
  • Fortune Engine μ€‘μ‹¬μ˜ 톡합 μžμ› λ³€ν™˜ λ‘œμ§μ„ μ„€κ³„ν•˜μ—¬ ν•˜μœ„ μŠ€ν…Œμ΄μ§€ μžμ›μ΄ μƒμœ„ λ‹¨κ³„λ‘œ μ „μ΄λ˜λŠ” μˆœν™˜ ꡬ쑰 ꡬ좕
  • IndexedDB와 lz-string 쑰합을 ν†΅ν•œ 둜컬 μƒνƒœ μ €μž₯ 및 데이터 μ••μΆ•μœΌλ‘œ Cloud sync λΆ€ν•˜ κ°μ†Œ
  • Svelte 5의 λ°˜μ‘ν˜• μƒνƒœ 관리λ₯Ό ν™œμš©ν•˜μ—¬ λ³΅μž‘ν•œ μŠ€ν‚¬ νŠΈλ¦¬μ™€ λ‹€μΈ΅ Prestige μ‹œμŠ€ν…œμ˜ μ‹€μ‹œκ°„ UI 동기화 κ΅¬ν˜„

μ‹€μ²œ 포인트

1. ν‘œμ€€ Number νƒ€μž…μ„ μ΄ˆκ³Όν•˜λŠ” 도메인 섀계 μ‹œ break_eternity.js와 같은 특수 μˆ˜ν•™ 라이브러리 κ²€ν† 

2. λ‹€λŸ‰μ˜ μƒνƒœ λ³€ν™”κ°€ λ°œμƒν•˜λŠ” κ²Œμž„ UI 섀계 μ‹œ Svelte와 같은 Fine-grained reactivity ν”„λ ˆμž„μ›Œν¬ ν™œμš©

3. μ›Ή 기반 둜컬 μ €μž₯μ†Œ μ‚¬μš© μ‹œ lz-string을 ν†΅ν•œ 직렬화 데이터 μ••μΆ•μœΌλ‘œ μ €μž₯ 곡간 νš¨μœ¨ν™”

νƒœκ·Έ

#Big-number#IndexedDB#PWA#Svelte#PixiJS
원문 읽기