Space Invader Çizme Yöntemi
(muffinman.io)- Space Invader Generator tanıtılıyor ve çeşitli piksel sanat invader'ları otomatik olarak üretme prensibi açıklanıyor
- Basit vektör çokgen gövde üretimi ile simetri, rastgele noktalar, yansıtma gibi geometrik kurallardan yararlanılan bir yapı kullanılıyor
- Kol, tentakül, boynuz gibi uzuv öğeleri de rastgelelik ve geometrik yöntemlerle genişletilerek kolay ve yaratıcı varyasyon imkanı sunuyor
- Vektör formundan piksele dönüştürme ve renk uygulama, göz ekleme gibi adımlarla tanıdık oyun grafikleri tamamlanıyor
- Tüm üretim süreci ve kod uygulama mantığı paylaşılıyor; böylece öğrenenler ve geliştiriciler doğrudan özelleştirme yapabiliyor veya pratik edebiliyor
Genel Bakış
Space Invader Generator, herkesin piksel sanat tarzı invader'ları kolayca rastgele oluşturabilmesini sağlayan bir araç. Bu yazıda çalışma mantığı ve yaratıcı rastgele üretim süreci, animasyonlar ve örneklerle birlikte anlatılıyor. Invader'ın geometrik yapısı, vektör-piksel dönüşümü ve renk uygulaması gibi tasarım ile kodu birleştiren yaklaşımı öne çıkıyor.
Başlangıç Arka Planı
- Rayven adlı bir 3D renderer aracı geliştirirken, gerçek yaratıcı çıktılar üretmenin önemini fark ediyor
- Basit ve eğlenceli bir sonuç için Space Invader gibi sezgisel ve kolay tanınan bir nesne seçiliyor
- Vektör tabanlı 3D render ile çeşitli klasik invader'ları çizdikten sonra, bunu rastgele bir üreticiye genişletmenin eğlenceli olacağı düşüncesiyle proje başlatılıyor
- Bu üretim deneyimi Creative Coding Amsterdam'ın kod meydan okuması kapsamında da paylaşılıyor
Kod Meydan Okuması
- Space Invaders kod meydan okuması birçok üretici ve geliştiricinin ilgisini çekiyor
- Farklı uygulamalar ve sonuçlar toplanıyor, geliştirici topluluklarında aktif biçimde paylaşılıyor
Eskizden Piksele
- İlk olarak kağıt üzerinde elle karalamalar ve eskizler yapılarak invader yapısı analiz ediliyor
- Aseprite aracıyla 15x15 piksel ızgara üzerinde çeşitli invader formları dijital olarak çiziliyor
- Ortak geometrik desenler keşfediliyor: merkezi eksen simetrisi, basit çokgen gövde gibi
- Piksel sanat ile vektör grafiğin avantajları birleştirilerek, çoğu elde çizilmiş tasarımı otomatik üreten bir işlev başarıyla uygulanıyor
- Uygulama ayrıntıları için GitHub deposuna bakılabiliyor
Invader Üretim Süreci
Merkez Bulma
- Tüm işlemlerin referans noktası olan merkez nokta belirleniyor
- Tentaküller altta üretildiği için ana gövde biraz yukarı yerleştiriliyor
- Genel simetriden yararlanılarak yalnızca bir taraf çiziliyor, sonra sağa-sola aynalanarak tamamlanıyor
Üst ve Altı Tanımlama
- Gövdenin yan tarafı tasarlanırken üst ve alt noktalar rastgele seçiliyor
- Simetri ekseni sayesinde iki tarafın biçimi aynı kalıyor
Sol Tarafı Çizme
- Gövdenin sol yanına 1 ila 5 nokta rastgele yerleştiriliyor
- Basit dışbükey çokgenden serbestçe sapılarak çeşitli sonuçlar üretiliyor
- Çizgi çakışmaları pikselleştirme aşamasında doğal biçimde düzeltiliyor
Sağa Yansıtma
- Soldaki tepe noktası verileri kullanılarak otomatik olarak sağ yansıma oluşturuluyor
Gövde Çokgenini Birleştirme
- Noktalar birleştirilerek vektör çokgen gövde tamamlanıyor
- Bunun üzerine uzuvlar eklendiğinde invader'ın temel formu ortaya çıkıyor
Uzuv Ekleme
Tentakül ve Boynuz Üretim Yöntemi
- Alttaki tentaküller ve üstteki boynuzlar ayrı ayrı üretiliyor; aynı yöntem yalnızca konum ve açı farkıyla uygulanıyor
Tentakül Kökünü Bulma
- Gövdenin en alt noktasını referans alarak sol tentakül rastgele üretilmeye başlanıyor
Merkez Çizgisini Eskizleme
- Rastgele noktalar kullanılarak bir polyline (merkez çizgisi) oluşturuluyor
- Tentakülün uzunluğu ve şekli çok farklı açılardan değiştirilebiliyor
Kalınlık Uygulama (fat line)
- Yalnızca merkez çizgisi çok ince kaldığı için iki yana noktalar eklenerek kalın tentakül formu oluşturuluyor
- Gövdeye yakın yerler daha kalın, uca doğru daha ince oluyor (taper efekti)
- Keskin açılı bölgelerde çizgi kalınlığı azaltılarak daha doğal birleşim yerleri elde ediliyor
- Genişlik ayarı için easing parametresi kullanılıyor
Tentakülü Tamamlama
- Her iki uç noktası bağlanarak kalın tentakül tamamlanıyor
Çoklu Tentakül ve Boynuzlara Genişletme
- Aynı yöntemle sağ-sol simetrisi, merkez tentakül ve üst boynuzlar gibi yapılar üretilebiliyor
- Merkez tentakülde, daha önce çizilmiş yan tentaküllerle çarpışmayı önlemek için işlem erken sonlandırılıyor
- Boynuzlarda ise alan çakışmasını önlemek için açı aralığı daraltılıyor ve iki yana yerleştiriliyor
Vektörden Piksele Dönüştürme
Gövdeyi Pikselleştirme
- Her pikselin merkezi vektör çokgenin içinde mi sorusuna göre gövde pikselleri belirleniyor
- Hassasiyetten çok sadelik ve çalışma hızı önceliklendiriliyor
Uzuvları Pikselleştirme
- Tentakül ve boynuzlar ince olduğundan, çoğu durumda merkez noktası içeride kalmıyor
- Noktalar ile bitişik piksel merkezleri arasındaki mesafe kontrol edilerek piksel ataması yapılıyor
- Tentakül doğallığını artırmak için mid-line ayrıntılandırması (line splitting) uygulanabiliyor
Göz Ekleme
- Önceden hazırlanmış çeşitli göz setleri arasından rastgele seçim yapılıyor
- Gözler gövdenin merkezine yakın yerleştiriliyor, dış kısma bumper pikseller ile padding ekleniyor
- Çakışan pikseller otomatik boşaltılarak delik benzeri bir görünüm veriliyor
Renk Uygulama
Renk Üretim Mantığı
- OKLCH renk uzayı kullanılıyor
- HSL'ye kıyasla daha tutarlı parlaklık (lightness) korunurken canlı renk kombinasyonları elde edilebiliyor
- Parlaklık tek bir değerde sabitleniyor, diğer iki parametre rastgele belirlenerek farklı varyasyonlar oluşturuluyor
- Böylece süreklilik ve görsel tutarlılık taşıyan bir invader görünümü sağlanıyor
CSS Varyasyonlarından Yararlanma
- Renkler CSS değişkenleriyle ayarlanabiliyor
- Arayüz öğeleriyle kontrast, debug modu gibi durumlara göre açıklık ve doygunluk değişimleri uygulanabiliyor
Animasyon Uygulaması
- Orijinal oyundaki gibi 2 karelik basit animasyonla tentaküllere, boynuzlara ve gözlere hareket veriliyor
- Uzuvların mid-line'ı kopyalanıp rastgele kaydırılarak değiştirilmiş kare oluşturuluyor
- Gözler de bir piksel kaydırılarak daha canlı bir görünüm elde ediliyor
Boyutlandırma
- Izgara boyutu büyüdükçe invader'lar giderek daha ayrıntılı ve karmaşık hale geliyor
- Çok büyüdüğünde vektörel soyutlama öne çıkıyor ve asıl invader hissi azalıyor
- Boyut 31x31 pikselle sınırlandırılmış, gizli bir seçenekle en fazla 51x51 mümkün
Sonuç
- Sonsuz çeşitlilikte renkli invader üreten bir jeneratör tamamlanıyor
- Üretim ve yazım süreci boyunca öğrenme, eğlence ve yaratıcı özgürlük sağlanıyor
- Kod ve mantık tamamen açık olduğundan pratik, deney ve özelleştirme için uygun bir yapı sunuluyor
Yapım Notları
- Yazı içindeki JavaScript kodu öğrenme ve referans amaçlı kullanışlı biçimde saklanıyor
- Anime.js ve çeşitli dış bağımlılıklar kullanılarak animasyon tasarlanıyor, uygulama TypeScript ile geliştiriliyor
- Ayrı bir debug modu ve step seçenekleri sayesinde üretim süreci doğrudan incelenebiliyor
Bonus - Halat Çizme Yazısı
- SVG ve JavaScript ile halat (rope) biçimi çizen önceki etkileşimli yazı da incelenmeye değer
1 yorum
Hacker News görüşü
Ben de bir space invader üreticisi yaptım
Çalışan bir sürüm var ve kaynak kodu da açık
İlhamı Jared Tarbell'den aldım
Ortaya çıkan sonuçların beklediğimden daha kolay şekilde iyi hale geldiğini gördüm
İşin özü gözler, iki taraflı simetri ve küçük karelerin içinde rastgele piksellerdi
Jared Tarbell'den ilham alma yorumuna katılıyorum; ben de bilgisayarla ilk haşır neşir olduğum dönemde onun işleri benim için çok şey ifade etmişti
levitated.net ve sonrasındaki complexification.net da internetin ilk dönemlerinin mücevher gibi siteleriydi
Ne yazık ki Flash (Levitated) ve Java (Complexification) desteği sona erdiği için örneklerin çoğu artık çalışmıyor
Yine de Complexification tarafında Processing
.pdekaynaklarını Processing editörüne yapıştırarak çalıştırmak mümkünHem UI'ı hem de rastgele renk paletlerini çok beğendim
Gerçekten harika bir sonuç çıkmış
Bu yazı, mobilde okurken yaşadığım en iyi deneyimlerden biriydi
Sonuçların bu kadar iyi olmasına gerçekten şaşırdım
muffinman.io/invaders adresinden görülebilir
Sadece yazının kendisine bakınca beklediğimden çok daha iyiydi
Ayrıca bugün oklch hakkında da bir şey öğrenmiş oldum
Biraz cilalayıp UI ekleyince çok daha iyi hale geldiğini düşündüm
OKLCH gerçekten büyük bir sıçrama
Kodla renklerle uğraşmak zordu ama bu kesinlikle işi çok kolaylaştırıyor
Ben şahsen HSLuv'u da seviyorum ama ne yazık ki tarayıcılarda yerel destek yok
Eğlenceli
İronik biçimde, gezegeni (Dünya'yı) invader yaratarak kurtarma hissi veriyor; üstelik brute force AI olmadan, tam bir keyifli hacker usulü yaklaşım
Bu proje rahatlıkla tavsiye edilir
Yaratım sürecinin büyüsü sonuçta böyle elle yapılan işin kendisinde yatıyor
Görseli en üste sabitleyip biz kaydırırken ne anlatıldığını sürekli göstermeleri gerçekten çok hoş
Normalde kaydırmaya bağlı olarak sayfanın gösterişli biçimde değişmesinden pek hoşlanmam ama bu düzen bunun istisnası
Harika
Dünyanın dört bir yanından space invader topluyorum
space-invaders.com/flashinvaders da bakmaya değer
Bununla ilgili olarak, 2000'lerin efsanevi web sitesi levitated.net'te yapılmış levInvaderFractal (2003) var
Okuması gerçekten çok keyifliydi
Sorun çözme yaklaşımında, yazının kendisinde ve sunumunda emek olduğu açıkça hissediliyor
İyi bir space invader'ın tehditkâr ve tehlikeli görünmesi gerektiğini düşünüyorum
Kıskaçlarını sallıyorsa ekstra puan alır
Çok ilginçti
8-bit estetiğini ve retro bilgisayarcılığı sevenler için özellikle daha da eğlenceli bir yazı
Okurken aklıma şu geldi: Bu, sonuçta 'Doğa Ana'nın her şeyi yengece dönüştürme arzusu'nun dijital bir tezahürü olabilir mi?
Space invader'ların simetrisi ve çeşitli bacaklarıyla, kıskaç benzeri yapıları yüzünden, sonunda bütün invader'lar yengece benziyor
Acaba Matrix'te bir tür eşleşme mi görüyoruz diye de düşündüm