Bir ascii haritası ve karakterleri bir tarayıcıda (cüce kale gibi) oluşturmak için iyi teknolojik çözümler? [kapalı]

Oyun web sitem için hayvanları ve insanları temsil etmek için metin karakterleri kullanmak ve bağımsız (sunucu güdümlü) AI ile harita karelerinde hareket etmelerini içeren bir web uygulaması oluşturmak istiyorum.

Aslında, tarayıcıda bir cüce kale haritası: Hareketli yaratıklar, çeteler, npcs ve adet. Bu ölçeğe ulaşmak istemememe rağmen, muhtemelen herhangi bir zamanda bu içeriğin dörtte birini göstermeye başladım.

Muhtemelen bazı arka plan / hareketsiz karolar statik olarak yüklenebilir. Ancak yaratıklar / hayvanlar ve hareket edebilecek şeyler için hangi teknoloji çözümlerinin en etkili olacağından emin değilim.

Bildiğim <canvas>Ben onun yetenekleri bu kullanım durumunda uyup uymadığını bilmiyoruz bile. Kesinlikle bir miktar javascript gerekli olacaktır.

Bu kullanım durumuna uyan javascript kütüphaneleri veya tuval kütüphaneleri var mı? Farkında olmadığım başka bir teknoloji? Herkes buna benzer bir şey yapmış web sitelerinin herhangi bir örnek biliyor, böylece onlardan fikir beşik olabilir?

Aslında web için bir karakter görüntüleme kütüphanesi yaptım , sadece optimize etmek için biraz zaman harcadığım, aynı zamanda metni sunmanın farklı yollarını da araştırdım; üç oluşturucu var:

1. <div>Her glifi özelleştirilebilir bir ön plan ve arka plan renkleri ile oluşturmak için bir öğe matrisi kullanan DOM .
2. <canvas>Öğeyi kullanarak karakterleri çizen tuval . Bu çok daha hızlı ve bunu destekleyecek performans testleri var: http://tapiov.net/unicodetiles.js/tests/
3. Yazı tipi dokusu oluşturmak için bir tuval öğesi kullanan ve daha sonra büyük görüntüleme alanı boyutlarına göre daha hızlı ve çok ölçeklenebilir, ancak tarayıcılarda iyi desteklenmeyen WebGL'yi kullanarak oluşturulan WebGL.

Bağlantılı performans testlerinin oldukça aşırı olabileceğini ve her karakteri her karede değiştirebileceğini unutmayın. Uygulamada, DOM oluşturucu bile çoğu amaç için yeterince hızlıdır.

Kendi kütüphanenizi yapmaya karar verirseniz, daha iyi performans gösterdiği ve daha büyük sahnelere izin verdiği için tuvali kullanmanızı tavsiye ederim. Yalnızca WebGL kullanmak kullanıcı tabanını sınırlar ve uygulanması karmaşıktır (Unicodetiles otomatik bir geri dönüş mekanizmasına sahiptir).

Geçenlerde çok ileri sürdü duydum ettik Başka kütüphane, rot.js . FOV sistemi ve zindan jeneratörleri ile birlikte geldiği için özellikle roguelikes'e yöneliktir. Tam bir paket istiyorsanız, bu yolun bir yolu olabilir.

Bence en etkili yol sadece sahte olmaktır. Normal bir 2B ekran oluşturuyormuş gibi kendi yerleşik hareketli yazı tipinizi kullanarak bazı hedef öğelere oluşturma. Bu yaklaşım, insanlar yazı tiplerini kaçırdığında veya çok farklı bir dil (Çince, Rusça) kullandıklarında garip bir şey olmamasını sağlar.

Yazı tipleri ve metinler, tüm tarayıcılarda pikselleri mükemmelleştirmek için en zor şeylerden biridir. Bir yazı tipi katıştırırken ve bazı CSS sihirli tarayıcılarını ve kullanılabilirlik ayarlarını kullanırken bile yazı tipini geçersiz kılabilir ve değiştirebilirsiniz. Normal web siteleri için piksel mükemmel metin bir sorun değildir, ancak Cüce Kalesi gibi oyunlarda birkaç piksel son derece tutarsız bir görünüme yol açabilir. Tarayıcı kullanmıyorken, normal bir uygulamada bile metin oluşturmayla ilgili sorunlar var. Yani Cüce Kalesi'nin kendisi bile tarif ettiğim yaklaşımı kullanıyor.

http://en.wikipedia.org/wiki/Dwarf_Fortress

Ekran görüntüleri, biraz değiştirilmiş kod sayfası kullanır ve 16 farklı renkte bitmap olarak uygulanan ve OpenGL ile oluşturulan 437 karakter kullanır

Düzenleme: bazı yorumlar aldığım için cevabı biraz uzattım

Çıktı yapmanız gereken satır ve sütun sayısını bulmak için pencere genişliğini ve yüksekliğini kontrol etmeli ve buna göre değiştirmelisiniz. OnResize olaylarını dinlemeyi ve genişliği ve yüksekliği buna göre değiştirmeyi unutmayın.

Bunu metinsel şekilde yapmak istediğinizde, bunu tek aralıklı yazı tipi ve her hücrenin bir karakter içerdiği bir tablo ile metin kullanarak yapabilirsiniz.

Tek tek karakterleri adreslemek için <table>, her biri <td>x ve y koordinatlarından oluşan bir kimliğe sahip doğru sayıda satır ve sütun içeren bir a oluşturabilirsiniz. Bu şekilde, münferit hücreleri kimliğe göre ele alabilir ve içHTML'sini değiştirerek harfi değiştirebilir ve renklerini değiştirmek için css sınıflarını değiştirebilirsiniz.

Bununla birlikte, bir tuval kullanmak daha hızlı olabilir, çünkü değiştirmeniz gereken her karakter için büyük bir DOM ağacını manipüle etmeniz gerekmez. Bu arada Cüce Kalesi de benzer bir şey yapıyor. Nesneleri temsil etmek için kullanılan karakterler gerçek metin çıktısı değil, aslında bitmap'lerdir ve 2 boyutlu grafik API'leri kullanılarak çizilirler. HTML5 tuvali bunun için iyi donanımlıdır. Bu sahiptir context.fillText tuvalin metni çizebiliriz yöntemi. Bu, tek tek karakterler çizmek için kullanılabilir. Context.fillStyle öğesini çağırarak context.font değişkenlerini ve her harfin rengini değiştirerek boyut ve yazı tipi yüzünü değiştirebilirsiniz .

Fontları rasterleştirmenin pahalı olduğu ve bildiğim hiçbir tarayıcı önbelleğe alma kullandığından, çerçeve başına yüzlerce kez fillText çağrılmasının yavaş olabileceğini unutmayın. Bu, aynı harfi aynı ayarlarla yüz kez oluşturduğunuzda, yüz kez yeniden rasterleştirileceği anlamına gelir. Performansı artırmak için her harfin rasterleştirilmiş görünümünü her bir renkle gizli bir tuvalde önbelleğe alabilir ve ardından bu gizli tuvalleri context.drawImage kullanarak çizebilirsiniz . Bir tuvalden diğerine kopyalamak genellikle yazı tipi rasterleştirmesinden çok daha hızlıdır.

Şu anda tuval kullanarak 2d bir oyun geliştiriyorum ve en büyük FPS yiyicinin yazı tipi çizimi olduğunu fark ettim. Rasterleştirilmiş metin için bir önbellek eklediğimde, performansı çok artırdı.

Tamam, bu sadece karanlıkta bir bıçak ve bunun nasıl ortaya çıktığını bilmiyorum.

Temelde eski günlerde yaptığı aynı hile konsollarını (aka terminal) kullanıyorsunuz. Önce bir tek aralıklı yazı tipiyle başlarsınız. N karakterli M satırınız var. Böylece metni yeterince geniş bir div (döküm: N em?) İçine atıp her N karakterine satır sonu koyabilirsiniz; bu durumda a <br/>yerine \n.

İşin püf noktası, arabellek karakterini char veya tüm içeriği bir kerede java betiği ile değiştirmek.

Gerçekten belirgin olmak istiyorsanız, her yerde aynı tek aralıklı yazı tipine sahip olduğunuzdan emin olmak için @ font-face komutunu kullanabilirsiniz.

Glifler açısından düşünün. Metnin görüntüsünü arkasındaki anlamdan ayırın. Örneğin:

(sözde kod)

if (display.hitGlyph)
    glyph = Glyph.Asterisk;

display(glyph);

Ve sonra, glif atlasını tanımlamak için temel kodunuzda, bir şey yapın:

Glyph.Asterisk = "*";

Glif atlası aslında çeşitli kodlamalara sahip bir ascii tablosuna bir arama olabilir. Buradaki nokta sadece ne zaman gösterileceğini ve ne gösterileceğini ayırmaktır. Sıfırdan bir çerçeve yapmayı öneriyorum. Size daha fazla özgürlük verecektir.