23
Nis
SFML topluluğunca en çok istenenlerden biri Android desteği. SFML forumlarında ve hata takip sisteminde bu desteğin eklenmesine yönelik istekleri her zaman görmek mümkün. SFML geliştiricisi Laurent Gomila ise Android desteğini henüz düşünmediğini çünkü böyle bir çalışmaya başlamadan önce SFML'nin içinde bazı temel değişikliklerin yapılması gerektiğini söylüyor.
Geçtiğimiz perşembe SFML forumunda Beuc isimli kullanıcı Android üzerinde SFML'yi çalıştırma konusunda denemeler yaptığını duyurdu. Beuc'un çalışması SFML'nin 1.6 sürümünü temel alıyor ama 2.0'ın sürüm adayının çıkmasıyla çalışmaların 2.0 için güncellenmesi olası. Şu anki çalışma ekrana bir Android uygulama penceresi getirebiliyor ve bağımsız görüntüleri gösterebiliyor.

Proje sayfasına GitHub üzerinden ulaşılabiliyor, yapılmış bir örnek uygulama www.beuc.net/tmp/sfml-android/sfml-test-debug.apk adresinde ve örneğin kaynak kodları da www.beuc.net/tmp/sfml-android/test-sfml.tar.gz adresinde bulunuyor.

Çalışma Android 2.3 veya sonraki sürümlerini destekliyor ve NativeActivity tabanlı olduğu için geliştirme yapmak için tek satır Java gerekmiyor. Çalışmada yer alan başlıca değişikler arasında EGL kullanıma hazırlamaları ve glVertex'in GLES1'ın glDrawArray'ine dönüştürülmesi bulunuyor.
SFML şu anda sadece masaüstü sistemleri destekliyor, Android gibi çok kullanıcısı olan bir platformun da desteklenmesi SFML'nin yaygınlığının artmasına katkı sağlayacaktır. Konuyla ilgili gelişmeleri takip etmek için projenin beslemelerini veya forumdaki SFML on Android - proof of concept başlığını izleyebilirsiniz.


21
Nis
SFML'nin ana geliştiricisi Laurent Gomila geçtiğimiz günlerde SFML 2.0 sürüm adayının hazır olduğunu duyurdu. Gomila herkesten bu sürüm adayını deneyerek karşılaştıkları durumları bildirmelerini istiyor, böylece kararlı sürüm çıktığında aşağıdakilerle ilgili hiçbir sorun kalmamış olacak:
  • Kritik hatalar
  • Genel UPA sorunları (SFML 3'e kadar değişmeyecek)
  • Paketleme sorunları
  • Bulduğunuz herhangi başka bir şey
SFML 2.0 için eğitseller henüz hazır değil ama Laurent Gomila şimdi bunlarla ilgilenmeye başlayacağını söylüyor sürüm adayı duyurusunda ve bu sürümü nasıl kuracağı ve kullanacağı hakkında hiçbir fikri olmayanlara kararlı sürümü beklemelerini tavsiye ediyor.

GNU/Linux sürümü bir kurulum betiği içermiyor, bu yüzden arşiv içeriğini elle tercih ettiğiniz kurulum konumuna (genellikle: /usr/local) kopyalamanız gerekiyor. GNU/Linux, Mac OS X ve Windows için derlenmiş sürümleri SFML yükleme sayfasından bulabilirsiniz. Pardus kullanıyorsanız Happy Kitty kaynak deposu üzerinden yükleme yapabilirsiniz.

SFML 1.6'dan bu yana nelerin değiştiğini öğrenmek için değişim listesini okuyabilirsiniz.


Kaynaklar:


25
Kas
Bu ders aracılığıyla SFML'nin Python bağlayıcısının nasıl derleneceğini, kurulacağını ve kullanılacağını öğrenebilirsiniz.


Yeni Python Bağlayıcısı
SFML 2 ile birlikte PySFML 2 isminde yeni bir Python bağlayıcısı geliştirilmeye başlandı. Daha önceki resmi bağlayıcıysa artık geliştirilmiyor.

Bastien'in geliştirmekte olduğu bu yeni bağlayıcı Python için C eklentileri yazmayı kolaylaştıran bir dil olan Cython ile kodlanıyor. Her ne kadar henüz resmi sürüm çıkmamış olsa da SFML 2'deki değişikliklere göre PySFML 2'da güncellemeler yapılıyor. Daha geniş bilgi için SFML forumlarındaki şu başlığa veya PySFML 2'nun GitHub üzerindeki proje sayfasına bakabilirsiniz.


Python Bağlayıcısının Kurulumu
PySFML 2 kısa bir süre önce Happy Kitty üzerinde Pardus için paketlendi. Pardus kullanıyorsanız PySFML 2'yu kolayca yükleyip kullanmaya başlayabilirsiniz. Arch kullanıcıları da AUR üzerinden yükleme yapabilir. Diğer dağıtımlar ve işletim sistemlerinde nasıl kurulum yapılacağını da PySFML 2'nun kurulum belgesinden öğrenebilirsiniz.


Pencere Oluşturmak
PySFML'de pencereler sf.RenderWindow sınıfıyla oluşturuluyor. Bu sınıf pencerimizi doğrudan oluşturmak için bazı yararlı yapıcılar sunmaktadır. Örnek bir kullanım aşağıdaki gibidir:
window = sf.RenderWindow(sf.VideoMode(800, 600, 32), 'PySFML Penceresi')
Burada pencerimizi temsilen window isminde yeni bir değişken oluşturuyoruz. Kullanılan paremetreleri şu şekilde açıklayabiliriz:
  • Kullanılan ilk parametre sf.VideoMode ve pencere için seçilen video kipini belirtiyor. Yukarıdaki örnekte 800x600 piksel büyüklüğünde ve 32 bit derinliğinde bir pencere için değerler görülüyor.
  • İkinci parametreyse pencere başlığıdır.
Pencereyi daha sonra oluşturmak veya farklı parametrelerle tekrar oluşturmak isterseniz sf.RenderWindow.create() metodunu kullanabilirsiniz:
window.create(sf.VideoMode(800, 600, 32), 'PySFML Penceresi');
Yapıcı ve sf.RenderWindow.create() metodu ayrıca iki ek paremetre daha almaktadır. Bunlardan biri pencerenin stilini ayarlamak ve diğeri de daha gelişmiş grafik seçeneklerini ayarlamak içindir. Gelişmiş grafik ayarlarına bu derste fazla değinilmeyecektir. Stil parametresiyse sf.Style bayraklarının (None, Titlebar, Resize, Close ve Fullscreen) bir kombinasyonu olabilir. Öntanımlı değer Resize | Close'dur.
# Bu tam ekran bir pencere oluşturur
window.create(sf.VideoMode(800, 600, 32), 'PySFML Penceresi', sf.Style.FULLSCREEN);

Video Kipleri
Yukarıdaki örnekte video kipi için fazla düşünmedik çünkü pencere kipinde çalışıyorduk, her boyut sorunsuzca kullanılabilir. Fakat tam ekran kipinde çalışmak istiyorsak yalnızca desteklenen kiplerden birini seçmeliyiz. sf.VideoMode.get_fullscreen_modes() sınıf metodu tüm desteklenen tam ekran kiplerinin listesini döndürmektedir. Listedeki öğeler en iyiden en kötüye doğru sıralanmaktadır, böylece sf.VideoMode.get_fullscreen_modes()[0] her zaman en yüksek kaliteli kip olur:
window = sf.RenderWindow(sf.VideoMode.get_fullscreen_modes[0], 'PySFML Penceresi', sf.Style.FULLSCREEN)
Pencere kipini seçmesi için kullanıcıyı özgür bırakıyorsanız, girilen değerleri uygulamadan önce kontrol etmelisiniz. Bunun için sf.VideoMode.is_valid()'i kullanabilirsiniz:
mode = bir_yerlerden_kipi_al() 
if not mode.is_valid():
    # Hata...
Kullanılan masaüstü kipi de sf.VideoMode.get_desktop_mode() sınıf metoduyla elde edilebilir.


Ana Döngü
Oyunumuzun döngü iskeletini yazmaya başlayalım:

# Kurulum kodu
window = sf.RenderWindow(sf.VideoMode(640, 480), 'PySFML Penceresi')
# ... 
while True:
    # Olayları yönet
    # ... 
    window.clear(sf.Color.WHITE)
    # Çizimleri yap
    # ... 
    window.display()

sf.RenderWindow.clear() pencereyi belirtilen renkle doldurur. sf.Color yapıcısıyla özel renk nesneleri oluşturabilirsiniz. Örneğin pembe bir arkaplan istiyorsanız window.clear(sf.Color(255, 192, 203)) yazabilirsiniz. sf.RenderWindow.display() çağrımı ise pencerenin içeriğini günceller.

Yukarıdaki kod pek doğru görünmeyebilir çünkü pencereyi aynı arkaplan rengiyle boyayıp durmak dışında pek bir şey yapmayan bir döngüye sahibiz yalnızca. Endişelenmenize gerek yok, çok yakında biraz daha işe yarar şeyler yazınca daha mantıklı görünmeye başlayacaklar.

Yukarıdaki gibi bir kod parçasını çalıştırıp işlem süreçlerini kontrol ederseniz bu küçük programın işlemciyi %100 olarak kullandığını görebilirsiniz. Bu pek de sürpriz değildir, yazdığımız döngü tam olarak bunu yapmaktadır. Bu durumu düzeltmek için sf.RenderWindow.framerate_limit kullanılabilir:
window.framerate_limit = 60
Bu satır SFML'e pencereyi saniyede 60 defadan fazla güncellememesini söylemektedir.

Aşağıdaki PySFML ile yazılmış örneği inceleyerek öğrendiklerinizi pekiştirebilirsiniz.

#!/usr/bin/python
# -*- coding: utf-8 -*- 
import sf 
def main():
    window = sf.RenderWindow(sf.VideoMode(800, 600),
                             'PySFML Penceresi',
                             sf.Style.FULLSCREEN)
    window.framerate_limit = 60
    running = True
    texture = sf.Texture.load_from_file('python-logo.png')
    sprite = sf.Sprite(texture)
    sprite.origin = (sprite.width / 2, sprite.height / 2)
    sprite.move(window.width / 2, window.height / 2) 
    while running:
        for event in window.iter_events():
            # Uygulama kapandığında veya
            # kullanıcı Escape tuşuna bastığında çalışmayı durdur
            if (event.type == sf.Event.CLOSED or
                (event.type == sf.Event.KEY_PRESSED and
                 event.code == sf.Keyboard.ESCAPE)):
                running = False 
        window.clear(sf.Color.WHITE)
        window.draw(sprite)
        window.display()
    window.close()
if __name__ == '__main__':
    main()

Kısaca SFML'yi Python ile nasıl kullanacağımızı gördük. Daha fazlası için diğer örnekleri inceleyebilir ve UPA belgelerine göz atabilirsiniz.


Kaynaklar


21
Mar
Bu derste çizgiler, dikdörtgenler, daireler ve çokgenler gibi basit 2B şekillerin SFML'de nasıl çizildiğini göreceğiz. SFML'de şekilleri çizmek için sf::Shape sınıfı kullanılabilir. Şekil olarak dışbükey bir çokken düşünebilirsiniz.

Şeklin noktalarını saat yönü veya saat yönünün tersi olarak sırayla vermek önemlidir, aksi halde şekil bozuk olacaktır. Şeklin doğru olarak çizilmesi için dışbükey olması da önemlidir, eğer içbükey bir şekil çizmek istiyorsanız şekli dışbükey alt şekillere bölmeyi deneyebilirsiniz.

Şekle yeni bir nokta eklemek için AddPoint fonksiyonunu kullanabilirsiniz:
sf::Shape Polygon;
Polygon.AddPoint(0, -50,  sf::Color(255, 0, 0),     sf::Color(0, 128, 128));
Polygon.AddPoint(50, 0,   sf::Color(255, 85, 85),   sf::Color(0, 128, 128));
Polygon.AddPoint(50, 50,  sf::Color(255, 170, 170), sf::Color(0, 128, 128));
Polygon.AddPoint(0, 100,  sf::Color(255, 255, 255), sf::Color(0, 128, 128));
Polygon.AddPoint(-50, 50, sf::Color(255, 170, 170), sf::Color(0, 128, 128));
Polygon.AddPoint(-50, 0,  sf::Color(255, 85, 85),   sf::Color(0, 128, 128));
Parametreler sırasıyla X, Y noktaları, noktanın rengi ve seçime bağlı olarak ana hat rengidir. Noktaların yerini belirtmek için iki kayar noktalı sayı yerine bir sf::Vector2f de kullanılabilir.

Şekillere konum ve renk gibi öznitelikleri eklendikten sonra bunlara ayrı ayrı ulaşılarak yazılıp, okunabilir:
// Üçüncü noktanın özniteliklerini al
sf::Vector2f Position     = Polygon.GetPointPosition(2);
sf::Color    Color        = Polygon.GetPointColor(2);
sf::Color    OutlineColor = Polygon.GetPointOutlineColor(2); 
// İkinci noktanın özniteliklerini ayarla
Polygon.SetPointPosition(1, sf::Vector2f(50, 100));
Polygon.SetPointColor(1, sf::Color::Black);
Polygon.SetPointOutlineColor(1, sf::Color(0, 128, 128));
Tüm şeklin ana hat genişliğini ayarlamak için SetOutlineThickness fonksiyonunu kullanabilirsiniz:
// Ana hat genişliğini 10'a ayarla
Polygon.SetOutlineThickness(10);
Eğer içi bir renkle dolu olmayan bir şekil çizmek istiyorsak ya da çizdiğimiz şekilden ana hattı kaldırmak istiyorsak aşağıdaki fonksiyonları kullanabilirsiniz:
// Şeklin boyamasını devre dışı bırak
Polygon.EnableFill(false); 
// Ana hat çizimini aktifleştir
Polygon.EnableOutline(true);
SFML'deki her çizilebilir nesne gibi şekiller de konumlarını, boyutlarını ve renklerini ayarlayan ortak fonksiyonları kalıt alırlar.
Polygon.SetColor(sf::Color(255, 255, 255, 200));
Polygon.Move(300, 300);
Polygon.Scale(3, 2);
Polygon.Rotate(45);
Şekli pencereye çizdirmek de diğer çizilebilir nesnelerle aynıdır:
App.Draw(Polygon);


Öntanımlı Şekiller
SFML; çizgi, dikdörtgen ve daire gibi çeşitli temel şekilleri çizmek için yardımcı fonksiyonlar sunar:
sf::Shape Line   = sf::Shape::Line(X1, Y1, X2, Y2, Thickness, Color, [Outline], [OutlineColor]);
sf::Shape Circle = sf::Shape::Circle(X, Y, Radius, Color, [Outline], [OutlineColor]);
sf::Shape Rect   = sf::Shape::Rectangle(X1, Y1, X2, Y2, Color, [Outline], [OutlineColor]);
Ana hat genişliği ve rengi için olan değerler isteğe bağlıdır ve öntanımlı olarak kapalıdır.

Bu dersle birlikte basit çokgenlerin nasıl çizileceğini de öğrenmiş olduk, pekiştirmek için  konuyla ilgili örneklere sfml-gelistirme deposundan ulaşabilirsiniz.



18
Mar
SFML'nin geliştiricisi Laurent Gomila, bugün foruma yazdığı My plans for the website tools başlıklı mesajla SFML 2 öncesinde internet siteleriyle ilgili planlarını SFML topluluğuyla paylaştı:
  • Forum olarak SMF'nin 2.0 RC5 sürümü kullanılması
  • Kaynak deposu olarak SVN'den GIT'e ve SourceForge.net'den GitHub'a geçiş
  • Görev takip aracı olarak GitHub'un sunmuş olduğu aracın kullanılması
  • Wiki olarak da yine GitHub'un sunmuş olduğu wiki servisinin kullanılması düşünülüyor.
Bu değişiklikler olursa:
  • Forumdaki tüm içerik yeni foruma aktarılabilecek.
  • SVN'deki tüm kodlar sorunsuzca GIT'e aktarılabilecek.
  • Görev takip sistemindeki girdiler yeni görev takip sistemine elle girilecek. Şu an pek fazla görev olmadığı için pek zor olmayacak bu.
  • Wiki içeriğinin de elle eklenmesi gerekecek yeni wikiye. Bu konuda topluluktan yardım bekleniyor.
Sizin de söyleyecekleriniz varsa ilgili forum başlığından düşüncelerinizi aktarabilirsiniz. Forum geçişine epey sevindim, böylece RSS desteğine kavuşacağız. Ne GIT'te ne de SVN'de usta olmadığım için bu geçişin tüm yönlerini göremesem de doğru bir karar bana göre. Aynı zamanda SFML bağlayıcılarının SFML ile aynı depoda mı yoksa ayrı ayrı depolarda mı olmasının daha iyi olacağı da tartışılan konular arasında. Görev takip aracı şu ana kadar etkili olarak kullanılmamış gibi ya da ben bir hata takip sistemini de buna dahil olarak düşündüğüm için böyle geliyor. Umarım bundan sonra hatalar, özellik istekleri ve görevler forum yerine görev takip sistemi üzerinden daha ulaşılabilir bir şekilde işlenir. Wiki tek dil için yeterli gibi ama Google Code'deki gibi çok dilli bir yapı nasıl kolayca oluşturulur bilmiyorum.


14
Mar
Bağımsız görüntüleri (sprite) göstermek belki de bir 2B uygulama programlama arayüzünün en önemli parçasıdır. Çünkü temel olarak 2B oyunlardaki çoğu şey bağımsız görüntülerdir. Şimdi SFML'de işlerin nasıl yürüdüğüne birlikte bakalım.

Genel olarak bağımsız görüntüler, sabit disklerden yüklenir. Bir görüntüyü SFML ile yüklemek için sf::Image sınıfı ve onun LoadFromFile fonksiyonu kullanılır:
sf::Image Image;
if (!Image.LoadFromFile("sprite.tga"))
{
    // Hata...
}
Ayrıca LoadFromMemory fonksiyonuyla halihazırda belleğe alınmış bir görüntüyü de yükleyebilirsiniz:
sf::Image Image;
if (!Image.LoadFromMemory(FilePtr, Size))
{
    // Hata...
}
Bir yerlerden görüntü yüklemek yerine görüntüleri kendiniz oluşturup, istediğiniz bir renkle doldurabilirsiniz veya bir piksel dizisinden yükleyebilirsiniz:
sf::Image Image1(200, 200, sf::Color(0, 255, 0));
sf::Image Image2(200, 200, PointerToPixelsInMemory);
Veya aşağıdaki gibi resim değişkenlerini tanımladıktan sonra da kullanabilirsiniz:
sf::Image Image1, Image2;

Image1.Create(200, 200, sf::Color(0, 255, 0));
Image2.LoadFromPixels(200, 200, PointerToPixelsInMemory);
Görüntüler bellekten yüklendiği zaman, piksellerin belirli bir biçimde (32 bit RGBA) olması gerektiğini unutmayın.

Ayrıca görüntünün piksellerine okumak ve yazmak için de erişilebilir:
sf::Color Color = Image.GetPixel(10, 20);
Image.SetPixel(20, 30, Color);
Görüntüleri değiştirirken dikkatli olun, kopyalanabilirler fakat bu pek de hafif bir işlem değildir.


Bir Bağımsız Görüntü Oluşturmak
Şimdiye kadar bir görüntüyü oluşturmayı, yüklemeyi ve değiştirmeyi öğrendik. Fakat bunlar bağımsız görüntüler değildir. SFML'de görüntüler ve bağımsız görüntüler iki ayrı sınıfa ayrılır. Görüntüleri, bellekteki piksel dizileri, bağımsız görüntüleri de bu dizileri pencerede görüntülemek için bir yol olarak görebilirsiniz.

SFML'de her bağımsız görüntü, sf::Sprite sınıfının bir örneğidir. Bu sınıf çizilebilir her şeye temellik eden sf::Drawable'den kalıt alır. sf::Drawable, çizilebilir nesnelerin görünümlerini almayı ve ayarlamayı sağlayan bir çok fonksiyon tanımlar. Aşağıda konuyla ilgili birkaç örnek kullanıma bakalım
sf::Sprite Sprite;
Sprite.SetColor(sf::Color(0, 255, 255, 128));
Sprite.SetX(200.f);
Sprite.SetY(100.f);
Sprite.SetPosition(200.f, 100.f);
Sprite.SetRotation(30.f);
Sprite.SetOrigin(0, 0);
Sprite.SetScaleX(2.f);
Sprite.SetScaleY(0.5f);
Sprite.SetScale(2.f, 0.5f);
Sprite.SetBlendMode(sf::Blend::Multiply);

Sprite.Move(10, 5);
Sprite.Rotate(90);
Sprite.Scale(1.5f, 1.5f)
Parametre olarak iki kayar noktalı sayı alan her fonksiyon aynı zamanda bir sf::Vector2f de alabilir.

Nesnelerin merkezi, SetOrigin fonksiyonu ile tanımlanır, öntanımlı merkez nesnelerin sol üst köşeleridir. Merkez; dönüşüm, döndürme ve yeniden boyutlandırmanın hangi noktanın referans alacağını söyler.

Piksel değerleri için tamsayılar kullanılmasına rağmen bağımsız görüntülerin konumları için kayar noktalı değerlerin kullanılmasını merak ediyorsanız, bunun nedeninin daha fazla esneklik sağlaması olduğunu söyleyebiliriz. Bazen bir bağımsız görüntünün yerini bir sonraki karede bir pikselden daha az bir mesafede hareket ettirmek isteyebilirsiniz.

Bağımsız görüntülere pek çok dönüşüm uygulandığı zaman, sonuçta oluşan alanı veya genel anlamda son konumun yerel bir noktasını almak epey zorlaşır. Bu yüzden sf::Sprite ve tüm çizilebilir sınıflar, iki dönüşüm fonksiyonunu tanımlar:
// Yerel bir noktayı, evrensel koordinatlara çevir
sf::Vector2f Global = Sprite.TransformToGlobal(sf::Vector2f(10, 25));

// Evrensel bir noktayı, yerel koordinatlara çevir
sf::Vector2f Local = Sprite.TransformToLocal(sf::Vector2f(425, 120));
Bunlar dışında sık kullanılan fonksiyonlara bakacak olursak:
// Bağımsız görüntünün kaynak resmini değiştir
sf::Image Image;
Sprite.SetImage(Image);

// Bağımsız görüntünün boyutlarını al
float Width  = Sprite.GetSize().x;
float Height = Sprite.GetSize().y;

// Bağımsız görüntüyü yeniden boyutlandır
Sprite.Resize(60, 100);

// Bağımsız görüntüyü X ve Y ekseninde döndür
Sprite.FlipX(true);
Sprite.FlipY(true);

// Bağımsız görüntünün belirtilen pikseldeki rengini al
sf::Color Pixel = Sprite.GetPixel(10, 5);
İstersek bağımsız görüntülere kolayca etkileşim katabiliriz:
// Geçen zamanı al
float ElapsedTime = App.GetFrameTime();

// Bağımsız görüntüleri hareket ettirelim
if (App.GetInput().IsKeyDown(sf::Key::Left))  Sprite.Move(-100 * ElapsedTime, 0);
if (App.GetInput().IsKeyDown(sf::Key::Right)) Sprite.Move( 100 * ElapsedTime, 0);
if (App.GetInput().IsKeyDown(sf::Key::Up))    Sprite.Move(0, -100 * ElapsedTime);
if (App.GetInput().IsKeyDown(sf::Key::Down))  Sprite.Move(0,  100 * ElapsedTime);

// Bağımsız görüntüleri döndürelim
if (App.GetInput().IsKeyDown(sf::Key::Add))      Sprite.Rotate(-100 * ElapsedTime);
if (App.GetInput().IsKeyDown(sf::Key::Subtract)) Sprite.Rotate( 100 * ElapsedTime);


Bağımsız Görüntü Çizme
Tarama penceresinde bir bağımsız görüntü çizmek çok kolaydır:
App.Draw(Sprite);
Ek bir parametreye ihtiyaç yoktur çünkü bağımsız görüntü kendi görüntüsüyle ilgili tüm bilgilere (konumu, rengi, ...) sahiptir. Eğer asıl görüntünün sadece bir alt bölgesini çizmek isterseniz, bağımsız görüntünün SubRect parametresini değiştirebilirsiniz:
Sprite.SetSubRect(sf::IntRect(10, 10, 20, 20));
Böylece görüntünün yalnızca 10, 10 pikselinden 20, 20 pikseline kadarki alanını çizdiriyoruz.

sf::IntRect, dikdörtgenleri işlemek için bir sınıftır. Kayar koordinatlı dikdörtgenler için ayrıca sf::FloatRect sınıfı bulunmaktadır.

Bağımsız görüntüler, bir 2B uygulama programlama arayüzündeki temel konseptlerden biridir ve görmüş olduğunuz gibi SFML içinde kullanımı çok kolaydır. İlerleyen derslerde basit şekillerin nasıl çizilebileceğini görebilirsiniz.

Bu eğitselle ilgili örneklere sfml-gelistirme deposundan ulaşabilirsiniz.


Kaynak: Graphics - Displaying a sprite


7
Mar
Window paketi, pencereleri ve olayları yönetmek için tam bir sistem sunar, hatta OpenGL kullanmanız için bir arayüzdür de. Peki OpenGL kullanmak istemiyorsanız ne olacak? SFML'nin sadece 2B'ye adanmış graphics paketini kullanabilirsiniz.

graphics paketini kullanmak için yapmanız gereken tek şey SFML/Graphics.hpp başlığını programınıza dahil etmektir. SFML/Window.hpp, graphics paketi tarafından programınıza dahil edileceği için ayrıca sizin de eklemenize gerek yoktur.


Tarama Penceresi
sf::Window ile oluşturulmuş temel SFML penceresinin bir şeylerin çizilmesiyle ilgili en ufak bir fikri dahi yoktur. Gerçekte sf::Window içine graphics paketinden hiçbir şey gösteremezsiniz. graphics paketinin daha fazla özellik içeren sf::RenderWindow isimli bir pencere sınıfı sunmasının nedeni budur. sf::RenderWindow, sf::Window'dan kalıt almaktadır, onun tüm özelliklerini içermektedir ve pencere oluşturma ve olay yönetiminde aynı onun gibi davranmaktadır. Bunlara ek olarak sf::RenderWindow, grafiklerle kolayca iş yapabilmeniz için ek özellikler sunar.

Gerçekte, graphics paketini kullanan bir iskelet uygulamanın window kullanandan pek bir farkı yoktur:

int main()
{
    // Ana tarama penceresini oluştur
    sf::RenderWindow App(sf::VideoMode(800, 600, 32), "SFML Graphics"); 
    // Oyun döngüsüne başla
    while (App.IsOpened())
    {
        // Olayları işle
        sf::Event Event;
        while (App.GetEvent(Event))
        {
            // Pencereyi kapat : çıkış
            if (Event.Type == sf::Event::Closed)
                App.Close();
        } 
        // Ekranı temizle (siyah renkle doldur)
        App.Clear(); 
        // Pencere içeriğini ekranda göster
        App.Display();
    }
    return EXIT_SUCCESS;
}
Belirgin tek fark, Clear'ı çağırmamız, böylece ekranda rastgele pikseller yerine (dersleri takip ettiyseniz, onlardan sıkılmaya başlamış olabilirsiniz), siyah bir görüntü elde edebiliriz. Eğer ekranı farklı bir renkle temizlemeniz gerekirse, Clear fonksiyonunu parametrelerle kullanabilirsiniz:
App.Clear(sf::Color(200, 0, 0));
SFML grafik paketi, renklerle çalışmak için sf::Color isminde kullanışlı bir sınıf sunar. SFML'deki tüm renkler bir sf::Color olmalıdır.

sf::Color, dört 8 bitlik elemana sahiptir r (red / kırmızı), g (green / yeşil), b (blue / mavi) ve a (alpha / alfa). Bu elemanların değeri 0'dan 255'e herhangi bir sayı olabilir. Yukarıdaki kodda kırmızıya 200 ve diğer elemanlara 0 değeri vererek kırmızı renk elde etmiş olduk.

Pencereyi temizlemek zorunlu değildir, eğer çizdirecekleriniz tüm ekranı kaplayacaksa bunu yapmanıza gerek yoktur.


Ekran Görüntüsü Almak
Çoğu oyunda bir tuşa bastığınızda bir dizine ekran görüntüsü kaydedebiliriz, böylece oyundaki ilginç görüntüleri, geçemediğimiz bir bölümü vs. diğerleriyle paylaşabiliriz. sf::RenderWindow da pencere içeriğini resim olarak kaydetmek için bir fonksiyon sunar. CopyScreen ile pencerenin tamamının veya bir kısmının görüntüsü alınarak SaveToFile ile bir resim dosyasına kaydedilebilir veya başka bir iş için kullanılabilir. Örneğin F1 tuşu ile ekran görüntüsü almak için aşağıdaki kod parçasından yararlanabiliriz:
sf::Image Image1; 
if (Event.Key.Code == sf::Key::F1)
{
    Image1.CopyScreen(App);
    Image1.SaveToFile("screenshot.jpg");
}


OpenGL'i de Kullanmak
Elbette sf::RenderWindow'da OpenGL komutlarını kullanmak da mümkündür. İsterseniz SFML çizim komutlarıyla OpenGL komutlarını birlikte istediğiniz gibi kullanabilirsiniz. Bununla birlikte SFML, OpenGL durumlarını öntanımlı olarak saklamaz, eğer bunu kendiniz yapmak isterseniz, PreserveOpenGLStates ile kaydetme, sıfırlama ve geri getirme gibi işlemleri yapabilirsiniz:
App.PreserveOpenGLStates(true);
Bu işlemciyi yoran bir işlemdir ve performansın düşmesine neden olabilir, yalnızca gerçekten ihtiyacınız olduğunda kullanın.

Tarama pencerelerin temellerini gördük, yavaş yavaş biraz daha gelişmiş işlemler için neler yapacağımıza bakmaya hazır hale geliyoruz.



Bu eğitselle ilgili diğer örneklere sfml-gelistirme deposundan ulaşabilirsiniz.


Kaynak: Graphics - Using render windows


Bu derste OpenGL'den pek fazla bahsetmeden, window paketiyle OpenGL'i nasıl kullanabileceğimize bakacağız. Bildiğiniz gibi OpenGL'in en büyük özelliklerinden biri taşınabilirliğidir. Bununla birlikte OpenGL ilk önce taranmış içeriğin (resmetme bağlamı, rendering context) oluşturulmasını gerektirir. Taranmış içerik, pek çok şey olmasına rağmen, taşınabilir değildir, her işletim sistemi bunu oluşturmak için kendine has bir yol kullanır. Bu yüzdendendir ki, insanlar çoğunlukla OpenGL'in her sistem üzerinde çalışabilmesini sağlayacak taşınabilir pencereleme / olay sistemleri için taşınabilir kütüphaneler kullanır. Bunu yapan en popüler kütüphaneler SDL ve GLUT'tur, fakat bunlar C ile yazılmış olduğundan C++ ile kullanılmaya her zaman elverişli değildir, özellikle de nesneye yönelimli bir yaklaşım izlemek istiyorsanız.


İlk Yapılandırma
SFML'de OpenGL'i kullanmak için yapmanız gereken tek şey Window.hpp başlığını programa dahil etmektir. OpenGL ve GLU başlıkları otomatik olarak programa dahil olacaktır böylece. Bu sizi bir önişlemci kullanmaktan kurtarmaktadır, çünkü OpenGL başlıkları her işletim sisteminde farklı isimlere sahiptir. Şimdi daha önceden öğrendiğimiz şekilde bir pencere oluşturarak ilerleyelim:
sf::Window App(sf::VideoMode(800, 600, 32), "SFML OpenGL");
OpenGL içerik oluşumu hakkında daha fazla kontrol istiyorsanız, derinlik arabelleği, şablon arabelleği ve örtüşme önler gibi ekstra grafik seçenekleri içeren bir yapıya geçebilirsiniz. Bunun için ContextSettings yapısını kullanabilirsiniz:
sf::ContextSettings Settings;
Settings.DepthBits = 24; // 24 bit derinlik arabelleği
Settings.StencilBits = 8; // 8 bit şablon arabelleği
Settings.AntialiasingLevel = 2; // 2 seviyeli örtüşmeönler
sf::Window App(sf::VideoMode(800, 600, 32), "SFML OpenGL", sf::Style::Close, Settings);
ContextSettings yapısının her bir üyesi belirli bir öntanımlı değere sahiptir, yani sadece sizin için önemli olan ayarları belirtmeniz yeterlidir. Donanım yapılandırmasına göre, istenen ayarların tamamı kullanıma uygun olmayabilir. Bu durumda SFML, makine tarafından desteklenen en yakın ayarları seçecektir. Tam olarak hangi değerlerin seçildiğini görmek için pencere yapılandırmasına bakabilirsiniz:
sf::ContextSettings Settings = App.GetSettings();
Pencere oluştuğunda, geçerli bir tarama içeriğine sahibiz demektir. Bu OpenGL ile ilgili yapılandırmaları yapmak için iyi bir zaman demektir:
// Renk ve derinlik temizleme değerlerini ayarla
glClearDepth(1.f);
glClearColor(0.f, 0.f, 0.f, 0.f); 
// Z-buffer'ı okuma ve yazma için aktifleşti
glEnable(GL_DEPTH_TEST);
glDepthMask(GL_TRUE); 
// Bir perspektif izdüşümü ayarla
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(90.f, 1.f, 1.f, 500.f);


Ana Döngü: Küp Çizme
Ana döngü daha öncekilerde olduğu gibi olay işleme ile başlıyor:
while (App.IsOpened())
{
    sf::Event Event;
    while (App.GetEvent(Event))
    {
        // Kapatıldığında veya Escape tuşuna basıldığında uygulamayı durdurmak için çeşitli kodlar
    }
Bunun dışında Resized olayını da izlememiz gerekiyor. Çünkü pencere boyutu değiştiği zaman, OpenGL görüş alanını yeni boyutla eşlenebilmesi için yeniden ayarlamalıyız. Görüş alanı, sahnenin görüntülendiği pencere alanıdır. Eğer yeni pencere boyutuna sığacak şekilde ayarlamazsanız, sahneniz pencerede istediğiniz gibi görüntülenmeyecektir.
if (Event.Type == sf::Event::Resized)
glViewport(0, 0, Event.Size.Width, Event.Size.Height);
Şimdi yeni bir kareyi taramaya başlayabiliriz. Herhangi bir OpenGL komutu çağırmadan önce, üzerinde işlem yapılacak olan pencerenin aktif olduğundan emin olmalıyız. Şu an sadece tek bir penceremiz olduğu için önemsemeyebiliriz ama birden fazla SFML penceresi ile çalışırken bunu mutlaka hesaba katmalıyız. Bir pencereyi aktif yapmak için onun SetActive fonksiyonunu çağırmamız yeterlidir:
App.SetActive();
Bundan sonra yapacağımız ilk şey, önceki karenin içeriğini silmek için renk ve derinlik önbelleklerini temizlemektir:
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
Şimdi bir küp çizmeye hazırız. İlk önce küpün konumunu ve yönelimini tanımlayalım. Yönelim, olaya biraz hareket katmak için o anki zamana göre değişecek.
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(0.f, 0.f, -200.f);
glRotatef(Clock.GetElapsedTime() * 50, 1.f, 0.f, 0.f);
glRotatef(Clock.GetElapsedTime() * 30, 0.f, 1.f, 0.f);
glRotatef(Clock.GetElapsedTime() * 90, 0.f, 0.f, 1.f);
Sonrasında küpümüzü çiziyoruz:
glBegin(GL_QUADS);
    glVertex3f(-50.f, -50.f, -50.f);
    glVertex3f(-50.f, 50.f, -50.f);
    glVertex3f( 50.f, 50.f, -50.f);
    glVertex3f( 50.f, -50.f, -50.f); 
    glVertex3f(-50.f, -50.f, 50.f);
    glVertex3f(-50.f, 50.f, 50.f);
    glVertex3f( 50.f, 50.f, 50.f);
    glVertex3f( 50.f, -50.f, 50.f); 
    glVertex3f(-50.f, -50.f, -50.f);
    glVertex3f(-50.f, 50.f, -50.f);
    glVertex3f(-50.f, 50.f, 50.f);
    glVertex3f(-50.f, -50.f, 50.f); 
    glVertex3f(50.f, -50.f, -50.f);
    glVertex3f(50.f, 50.f, -50.f);
    glVertex3f(50.f, 50.f, 50.f);
    glVertex3f(50.f, -50.f, 50.f); 
    glVertex3f(-50.f, -50.f, 50.f);
    glVertex3f(-50.f, -50.f, -50.f);
    glVertex3f( 50.f, -50.f, -50.f);
    glVertex3f( 50.f, -50.f, 50.f); 
    glVertex3f(-50.f, 50.f, 50.f);
    glVertex3f(-50.f, 50.f, -50.f);
    glVertex3f( 50.f, 50.f, -50.f);
    glVertex3f( 50.f, 50.f, 50.f);
glEnd();
Son olarak da taranan sahneyi ekranda göstererek ana döngümüzü tamamlıyoruz:
App.Display();
İşte oldu, tüm bunları başarıyla yaptıktan sonra siyah ekran üzerinde dönmekte olan beyaz bir küpü izliyor olmalısınız. Her zamanki gibi ana döngüden çıktıktan sonra herhangi bir temizleme işlemi gerekmemekte.

Görmüş olduğunuz gibi SFML'de OpenGL kullanmak son derece kolaydır ve fazladan bir iş yapmanızı gerektirmez. Sadece birkaç satır kodla portatif ve nesne yönelimli bir OpenGL pencereleme sistemi elde edebilirsiniz.



Bu eğitselle ilgili diğer örneklere sfml-gelistirme deposundan ulaşabilirsiniz.


Kaynak: Window - Using OpenGL


6
Mar
M.A.R.S., uzayda rakiplerinizi vurmaya çalıştığınız renkli ve zevkli bir oyun. SFML ile yapılmış en başarılı oyunlardan biri olan M.A.R.S. daha şimdiden pek çok hoş özelliğe sahip ve isterseniz siz de çeviri, kodlama, grafik konularında katkıda bulunabilirsiniz.



Free Gamer Sayfası
SFML Forum Sayfası


MotoGT, 2 boyutlu, üstten görünümlü bir motosiklet yarış oyunudur. Bir MotoGP sürdüğünüz oyunda yarışları kazanmak başlıca amacınız. Kariyer kipinde yarışları kazandıkça deneyim kazanabilir ve motosikletinizi geliştirebilirsiniz. Şampiyonalar kazandıkça da çeşitli gizli özellikleri ortaya çıkarabilirsiniz.



Happy Penguin Sayfası
SFML Forum Sayfası


Pengui Shot, Teeworlds ve Soldat benzeri bir 2B ateş et vur platform oyunudur. SFML, Box2D ve SPARK ile geliştirilen oyunun Windows sürümünü proje sayfasından indirebilirsiniz.


Caperucita Plus Plus, Nicolas Bertoa tarafından geliştirilen 2 boyutlu bir kırmızı başlıklı kız platform oyunudur. Oyunda iki kip bulunuyor; gündüzleri beyaz kurtları vurmaya, geceleri de siyah kurtları vurmaya çalışıyorsunuz. Oyunun Windows sürümünü proje sitesinden indirebilirsiniz.


Excellence, daha önceleri Eve Shooter ismiyle geliştirilen ve Eve Online evreninde geçen bir her şeyi vur oyunudur. Oyun hakkında daha fazla bilgiyi SFML forumlarındaki sayfasından edinebilirsiniz.


Spyro 2D, hayran yapımı bir Spyro the Dragon oyunudur. Henüz oynanabilir bir sürümü olmayan bu sevimli ejderha oyunu hakkında videodan başka bir sayfa da yok görünüyor şimdilik.


Raining Snow, gökyüzünden Noel Baba'nın attığı hediyeleri toplamaya ve yağan karlardan kaçmaya çalıştığınız basit bir yeni yıl oyunu. Sadece Windows sürümü olan oyunu proje sayfasından indirebilirsiniz. SFML forumlarındaki sayfasından oyun hakkında daha fazla bilgi alabilirsiniz.


The Last Fireman, Global Game Jam 2011 kapsamında geliştirilen yangın olur biz yangına gideriz oyunudur. Windows üzerinde çalışan sürümünü indirmek için global game jam sayfasını ziyaret edebilirsiniz.


Isotower, Maxis'in klasiği Sim Tower'ın bir yeniden yapımıdır. Henüz erken geliştirme aşamasında olan oyun, geliştiricisinin söylediğine göre kısa bir zaman içinde oynanabilir bir alfa sürümüne ulaşacakmış.



Oyunda kendinizi evinizde hissedebileceğiniz gökdelen, otel, alışveriş merkezi benzeri bir yapı oluşturmaya çalışıyorsunuz.



Isotower Geliştirici Günlüğü


Radiant Laser Cross, henüz geliştirilme aşamasında olan, Radiant-Silver-Gun ve Ikaruga benzeri bir hepsini vur oyunudur.

Oyunda basitçe dört farklı renkteki düşmanları, o renkteki silahınızla vurmaya çalışıyorsunuz. Projeye destek olabilir, yapılacaklar listesine göz atabilir ve SFML forumlarındaki sayfasına bakabilirsiniz.


Radiant Laser Cross - Early Gameplay Prototype from Klaim on Vimeo.


Balloon Lars, daha çok çocuklara yönelik bir balon oyunu. Glenn De Backer tarafından geliştirilen oyun, bir ayının kullandığı balonla yıldızları toplamasını konu alıyor.


Balloon Lars - big step forward from Glenn De Backer on Vimeo.


rArkanoid, ağ kamerasıyla kontrol edilen basit bir Arkanoid türevi. Oyunda çubuğu kontrol etmek için el veya kafanızı kamera önünde hareket ettirmeniz yeterli.

OpenCV ve CSFML ile geliştirilen oyunun henüz kaynak kodları yayınlanmadı ama geliştiricisi ileride kaynak kodları yayınlayacağını söylemiş.


rArkanoid - simple arkanoid controled by webcam from Piotr on Vimeo.