01 / Reactions
Karakter etkileşime tepki verir.
Kullanıcı aksiyonları emotion/reaction durumlarını etkileyerek tekdüze animasyon döngüsünden daha canlı davranış üretir.
Interactive PWA · Virtual Character · Offline
SNOB
Snob, klasik bir web sayfası gibi davranmak yerine tarayıcı içinde yaşayan küçük bir dijital karakter dünyası. Kullanıcının dokunması, sürüklemesi ve zamanın değişmesi karakterin tepkilerini etkiliyor; duygu, animasyon, uyku, aksesuar, envanter ve ses katmanları aynı deneyimin içinde çalışıyor.
Nedir?
Bir butona basınca animasyon oynatan arayüz değil; davranış durumu olan, zamanla değişen ve önceki etkileşimlerini yerel olarak taşıyan bir karakter deneyimi.
Snob’un ana fikri karakteri ekranın dekoru olmaktan çıkarmak. Sürükleme ve fizik etkileşimleri, reaction/emotion durumları, gündüz-gece ve uyku davranışı kullanıcının karakterle kurduğu ilişkinin temelini oluşturuyor.
Bunun etrafında coin, inventory ve aksesuar sistemi; yerel persistence; Web Audio tabanlı ses katmanı ve service worker/offline desteği bulunuyor. Sonuç olarak proje bir web UI’dan çok, küçük ama durum sahibi bir sanal karakter runtime’ına yaklaşıyor.
02 / Drag + Physics
Karakter fiziksel hissedilir.
Sürükleme ve hareket davranışları ekrandaki objeyi statik sprite olmaktan çıkarıp doğrudan manipüle edilebilir hale getirir.
03 / Day / Night
Zaman deneyimin parçasıdır.
Gündüz/gece ve uyku davranışı, karakterin her an aynı durumda kalmamasını sağlar.
04 / Inventory
Coin, eşya ve aksesuar katmanı var.
Kullanıcı ilerlemesi ve karakter özelleştirmesi envanter/aksesuar sistemiyle kalıcı bir oyunlaştırma katmanı kazanır.
05 / Audio
Ses davranışla birlikte çalışır.
Web Audio tabanlı ses katmanı görsel tepkileri tamamlayan runtime parçası olarak kullanılır.
06 / PWA
Deneyim offline devam edebilir.
Service worker ve yerel persistence, karakter durumunun yalnız çevrimiçi bir sayfa oturumuna bağlı kalmamasını sağlar.
Etkileşim akışı
Snob’da bir kullanıcı hareketi doğrudan “animasyon oynat” komutuna gitmek yerine karakterin mevcut durumuyla birlikte değerlendirilir.
01
InputDokunma, tıklama, sürükleme veya zaman kaynaklı olay oluşur.
↓
02
BehaviorMevcut duygu/tepki ve uyku-zaman bağlamı yeni davranışı etkiler.
↓
03
MotionAnimasyon ve gerekiyorsa drag/physics davranışı güncellenir.
↓
04
AudioUygun ses katmanı Web Audio üzerinden tepkiye eşlik eder.
↓
05
EconomyCoin, inventory veya accessory ile ilgili değişiklik varsa kullanıcı durumuna işlenir.
↓
06
PersistGerekli durum yerel kayıt katmanına yazılır; PWA sonraki açılışta deneyimi sürdürebilir.
✓
Character Runtime
Snob’un ilginç tarafı çizimin kendisi değil; aynı karakterin farklı girişler, zaman ve kalıcı kullanıcı durumu altında tutarlı biçimde davranması.
Emotion / reaction
Karakterin tepkileri mevcut durumla ilişkili; her etkileşim aynı görsel sonucu üretmek zorunda değil.
Sleep cycle
Uyku ve gündüz/gece davranışı, gerçek zamanın karakter deneyimine girmesini sağlıyor.
Inventory state
Aksesuar ve coin sistemi görsel özelleştirmeyi kullanıcı ilerlemesiyle bağlıyor.
Offline continuity
Service worker ve yerel kayıt, deneyimin bağlantı yokken de açılabilmesini ve durumunu koruyabilmesini destekliyor.
Hastasına
İçeride ne oluyor?
Bir sanal karakter projesinde zorluk tek tek animasyonları üretmekten çok, state değişimlerinin birbirini ezmemesi. Drag sırasında reaction, uyku sırasında kullanıcı girdisi, ses ile animasyon senkronu ve persistent inventory aynı runtime içinde çakışmadan çalışmalı.
behavior/state
Reaction ve emotion katmanı
Karakterin kullanıcıya verdiği yanıtlar birden fazla davranış durumunun birlikte değerlendirilmesine dayanır. Bu katman, doğrudan DOM olayından görsele atlamak yerine davranış kararını araya koyar.
- Reaction states
- Emotion states
- Context-aware transitions
- Behavior-driven animation
interaction/physics
Drag ve fizik etkileşimleri
Pointer/touch kaynaklı sürükleme davranışı karakterin konum ve hareket durumunu değiştirir. Fizik hissi, karakteri sabit bir UI öğesinden farklılaştıran temel etkileşimdir.
- Pointer/touch input
- Drag lifecycle
- Motion state
- Physics-like response
time/cycle
Gündüz, gece ve uyku
Zamana bağlı davranışlar karakter state’inin yalnız kullanıcı inputuna bağlı olmadığını gösterir. Uyku döngüsü görsel ve etkileşim katmanlarını birlikte etkiler.
- Day/night context
- Sleep behavior
- Time-aware reactions
- State gating
economy/inventory
Coin, inventory ve aksesuarlar
Karakter özelleştirmesi runtime state’inden ayrı bir kullanıcı ilerleme katmanı oluşturur; sahip olunan öğeler ve aksesuar seçimi yerel olarak korunur.
- Coin state
- Inventory
- Accessories
- Persistent ownership
audio/web
Web Audio davranış katmanı
Ses yalnız bir dosya oynatma detayı olarak değil, kullanıcı etkileşimi ve karakter reaksiyonlarını destekleyen bir feedback kanalı olarak kullanılır.
- Web Audio
- Interaction feedback
- State-linked sound
- Browser audio lifecycle
pwa/offline
Service worker + local persistence
PWA kabuğu ve yerel kayıt, uygulamanın yeniden açıldığında karakter/kullanıcı durumunu sürdürebilmesini ve temel deneyimin offline erişilebilir olmasını destekler.
- Service worker
- Offline shell
- Local persistence
- Session continuity
Character loop — sadeleştirilmişInput → state → reaction → persist
01 / INPUT
Pointer / touch / time
Kullanıcı hareketleri ve zaman tabanlı olaylar runtime’a girer.
02 / STATE
Emotion + reaction + sleep
Karakterin mevcut davranış bağlamı hangi tepkinin mümkün olduğunu belirler.
03 / MOTION
Animation + drag / physics
Görsel hareket ve doğrudan manipülasyon katmanı uygulanır.
04 / SOUND
Web Audio
Davranışa uygun ses geri bildirimi görsel tepkiye eşlik eder.
05 / PLAYER
Coins + inventory + accessories
Kullanıcıya bağlı ilerleme ve özelleştirme durumu güncellenir.
06 / STORAGE
Local persistence + service worker
Durum korunur ve PWA deneyimi sonraki oturum/offline kullanım için devamlılık kazanır.
Bugün
ExperienceKarakter etkileşimleri tek runtime’da birleşiyor.
Reaction/emotion, drag/physics, day/night, sleep ve audio aynı deneyimin parçaları.
ProgressionInventory ve aksesuar sistemi mevcut.
Coin, inventory ve özelleştirme kullanıcı tarafında kalıcı ilerleme katmanı oluşturuyor.
OfflinePWA davranışı destekleniyor.
Service worker ve yerel kayıt temel deneyimin bağlantıdan bağımsız devamlılığını güçlendiriyor.
CharacterProje bir UI demosundan daha fazlası.
Amaç, tarayıcı içinde davranış sahibi ve kullanıcıyla zaman içinde ilişki kuran küçük bir dijital karakter dünyası.