Yandex.Metrica
XNA'de Resim Ekleme ve Çizdirme

Merhaba arkadaşlar, herhangi bir konuda birşeyler öğrenme sırasında en sıkıntılı kısımlar işin teorik kısımlarıdır.Bunu eminim ki çoğunluğumuz kabul eder.Pratik genellikle daha eğlencelidir ve kişiye elle tutulur somut ürünler verdiğinden motivasyonu artırır.Onun için yavaş yavaş Xna Framework ün yardımlarıyla çalışmalarımıza başlayalım diyorum.


İlk çalışmamızda oyun penceremizde bir imaj dosyası görüntüleyebilme üzerine çalışacağız.2 Boyutlu bir çalışma yapacağımızdan 2 boyut hakkında bir fikrimizin olması gerekiyor tabi.


Analitik geometri dersi almış olanların çok yakından tanıdıkları x-y eksenleri üzerinden çizim işlemlerimizi gerçekleştireceğiz.Bu dersi anlatan hocalar gönül isterdi ki lise yıllarında oyun programlamada önemli yeri olan koordinat sisteminin sadece 3 harfli sınavlarda soru çözmek için varolmadığını anlatsalardı.En azından körü körüne denklemlerle çember,dikdörtgen tanımlarken iki çemberin birbirleriyle kesişip kesişmediğini nasıl anlayacağımız üzerine dursaydık.Aslında bu çok kaliteli bir analitik geometri sorusu olabilirdi.En azından bizler için daha anlaşılır ve eğlenceli olurdu herşey diye düşünüyorum.(Eğitim sisteminde öğretilen herşeyin sadece sınavlar için ezberlenmesi gereken veya kağıt üzerinde belli sonuçları bulmak için hesaplama yapmak adına var olmamasını diliyorum.Tek başına analitik geometri ile ilgili bir sıkıntım yok sadece yeri geldiği için söyledim.Bence herşeye rağmen en zevkli derslerden biriydi)



Yukarıdaki resmimizde görüldüğü üzere ekranın sol-üst köşesi koordinat sistemimizin başlangıç noktası olup X ve Y eksen değerleri (0,0) dır.Ekranın solundan sağına doğru X değerleri artmaktadır,yukarıdan aşağıya ise Y değerleri artmaktadır.Aksi durumlarda X veya Y değerleri azalmaktadır.(Bütün bunları piksele piksel olarak düşünebiliriz)


XNA Framework kullanarak yapacağımız sprite çizimlerinde bir noktayı vurgulamadan geçemeyiz.Resimde gördüğümüz koordinat düzleminde 500 e 400 konumlarında bulunan nokta spriteBatch.Draw(...) metotu içerisinde bildirmemiz gereken konumdur.Çizdirmek istediğimiz(Burada bir gülen surat resmi) sprite ın konumunu girerken çizdirilecek resmin sol-üst köşesine göre nerede bulunması gerektiğine karar vermeliyiz.Yukarıda ki resimde (500,400) koordinatlarında girilmiş bir resmin nasıl görüntüleneceğini görüyoruz.


Şimdi çizim işlemini nasıl gerçekleştirebileceğimize odaklanalım.

Oyun projemizi oluşturduğumuzda karşımıza hazır olarak gelen Game1 sınıfı SpriteBatch nesnesinin mevcut olduğunu görüyoruz.Bu nesnemiz ile sprite çizimlerimizi ve pencereye yazı yazma işlemlerini gerçekleştirebiliriz.Biz bu yazımızda SpriteBatch nesnemizin ekrana nasıl çizim yapacağını inceleyeceğiz.


Spritebatch nesnemizi oyunumuzda bütün çizimlerin yapıldığı fonksiyon olan Draw metotu içerisinde kullanacağız.SpriteBatch nesnesi spriteBatch.Draw(...) şeklinde sprite çizimini gerçekleştirmektedir. Öncelikle bilmemiz gereken şey bu işlemin olabilmesi için nesnemizin çizim fonksiyonunu yine aynı nesnemizin Begin ve End isimli fonksiyonları arasında yapmamız gerekmektedir.


spriteBatch.Begin( );

spriteBatch.Draw( );

spriteBatch.End( );



Aynı şekilde spritebatch nesnemizin DrawString isimli metotudunu kullanarak ekrana yazı yazdırmamızda mümkündür.Bunu başka bir yazıda inceleyeceğiz.


SpriteBatch nesnemizin Draw metodu 7 tane(XNA 3.1 sürümü ile) değişik girdi alabilecek şekilde ayarlanmıştır.Bu overload(1) fonksiyonlardan şimdilik bizim işimizi en kolayından çözecek olanını kullanacağız.Başka yazılarımda spriteBatch.Draw(...) metotunun çizdirmek istediğimiz sprite ımız için rotation(2) veya scale(3) ayarlamaları yapabileceğimiz yönlerini incelemeye çalışacağım.


spriteBatch.Begin( );

spriteBatch.Draw(Texture2D texture,Vector2 position,Color color);

spriteBatch.End( );


SpriteBatch Draw metotunun aldığı parametrelere baktığımızda Texture2D,Vector2 ve Color isimli sınıflardan olan nesnelere ihtiyaç duyulmaktadır.Bu sınıflar XNA Framework ü ile birlikte gelen tanımlanmış sınıflar olup XNA nin nimetleridir diyebiliriz.Kullandıkça daha iyi anlayacağımız bu sınıflar hakkında kısaca bahsetmek istiyorum.Texture2D sınıfı birazdan göstereceğimiz şekilde Content Pipeline mimarisini kullanarak yüklediğimiz sprite larımızı atadığımız tiptir.2D doku yüklediğimiz bir nesne ile çizim için gerekli en basit üç ihtiyaçtan birini karşılamış oluruz böylece.Vector2 sınıfı ise X ve Y diye iki adet koordinat girilmesi gereken dokunun ekranın neresinde görüntüleneceğini belirtmemizde kullanılacak önemli diğer bilgidir.Temel çizim amaçlı ihtiyaçlardan sonuncusu ise renk bilgisidir.Color isimli sınıf sayesinde yüklediğimiz dokunun renk ayarlamalarını yapabiliriz.Biz örneğimizde renk olarak White kullanacağız.İleride bunlarla ilgili daha ayrıntılı örnekler anlatmaya çalışacağım ama kısaca bahsedersem beyaz değeri renk sınıfı için çizilecek dokunun renklerini orjinal haliyle yansıtır.Örneğin kırmızı rengi kullanmak istersek dokumuzun renk tonları kırmızı ağırlıklı olacak ve resmimize kızıl bir pencereden bakıyormuşuz izlenimi verecektir.Aynı şekilde diğer renklerin baskınlığını artırabiliriz.(Renklerle ilgili ileride daha ayrıntılı anlatımlarım olacaktır)


Şimdi elimizde bulunan bir resmi ekranda nasıl görüntüleriz bunu gerçekleştirelim.


Benim çalışmamda denizanasi.jpg isimli resmi projeme yükleyip onu istediğim koordinatlarda(pixel olarak) görüntülemeyi amaçlamaktayım.


Daha önceden anlattığımız Content Pipeline konusunda değindiğim şeylere göz atabilirsiniz.Visual Studio ortamında proje dosyaları kısmında ki Content isimli içerik klasörünü hepimiz görmüşüzdür.İşte örneğin masaüstümde bulunan resim dosyasını bu klasöre sürükleyip atıyorum.İkinci yol olarak ise Solution Explorer kısmında gördüğümüz bu Content isimli klasöre sağ tıklayıp Add Existing Item diyerek dizinini bildiğimiz dosyamızı bulup yükleme işlemi yapabiliyoruz.Bu işlemin ardından artık programımızın içerisinde yüklediğimiz imaj dosyasını tanımlayabiliriz.Texture2D sınıfından bir nesne oluşturup ona Content dosyasına attığımız imajı atamalıyız.


Texture2D doku;

......

doku=Content.Load(assetname);


Bu işlemi Load fonksiyonu içerisinde gerçekleştiriyoruz.Burada assetname denen kısma benim çalışmamda "denizanasi" gelecek.Uzantısı olmadan dosyanın halini yazdığımız bu kısım için emin olmak isiyorsanız Content klasöründe resminizi bulun ve bir kere üzerine sol tıklayın.Bu işlemin ardından seçtiğimiz öğenin özelliklerini bildiren properties isimli bir kısım belirecektir.(Solution Explorer altında)Burada XNA Framework Content Pipeline yazan başlık altında AssetName diye bir kısım var.İşte burada yazan ifadeyi assetname kısmına yazabilirsiniz.





Aşağıdaki kodları inceledikten sonra programın çalışır halinden bir kare en altta verilmiştir onuda inceleyiniz.


using System;

using System.Collections.Generic;

using Microsoft.Xna.Framework;

using Microsoft.Xna.Framework.Audio;

using Microsoft.Xna.Framework.Content;

using Microsoft.Xna.Framework.GamerServices;

using Microsoft.Xna.Framework.Graphics;

using Microsoft.Xna.Framework.Input;

using Microsoft.Xna.Framework.Media;

using Microsoft.Xna.Framework.Net;

using Microsoft.Xna.Framework.Storage;

namespace WindowsGame3

{

public class Game1 : Microsoft.Xna.Framework.Game

{

GraphicsDeviceManager graphics;

SpriteBatch spriteBatch;


//Texture2D nesnemiz

Texture2D doku;

public Game1()

{

graphics = new GraphicsDeviceManager(this);

Content.RootDirectory = "Content";

}


protected override void Initialize()

{

base.Initialize();

}



protected override void LoadContent()

{

spriteBatch = new SpriteBatch(GraphicsDevice);

//doku nesnemize Content e attığımız resmin bilgilerini yüklüyoruz

doku = Content.Load("denizanasi");

}


protected override void UnloadContent()

{

}


protected override void Update(GameTime gameTime)

{

if(GamePad.GetState(PlayerIndex.One).Buttons.Back==ButtonState.Pressed)

this.Exit();


base.Update(gameTime);

}


protected override void Draw(GameTime gameTime)

{

GraphicsDevice.Clear(Color.CornflowerBlue);

// Burada 500 e 400 konumunda dokumuzu çizdiriyoruz

spriteBatch.Begin();

spriteBatch.Draw(doku,new Vector2(500,400),Color.White);

spriteBatch.End();

base.Draw(gameTime);

}

}

}



XNA de basit çizdirme işlemi hakkında elimden geldiğince bilgi vermeye çalıştım.Eğer hatalarım olduysa afedersiniz.Yeni yazılarla XNA yi incelemeye devam edeceğiz,kendinize iyi bakın.


(1) Overload (Aşırı Yükleme) : Örneğin elimizde bir fonksiyon var belli tipte ve sayıda giriş parametresi alarak bir hesaplama gerçekleştiriyor.Eğer bizler bundan başka fonksiyonun ismiyle aynı fakat parametre sayı ve tipi bakımından farklı fonksiyonlar tanımlarsak o metodu overload etmiş oluruz.

(2) Rotation : Dönme hareketi.2D oyun programlamada elimizde ki sprite ı örneğin merkez noktası üzerinde belirlediğimiz bir açıyla döndürme işlemidir.

(3) Scale : Boyutlandırma,ölçeklendirme.Sprite ın ölçülerinde görünümde değişim yapabilmemize olanak sağlar.Yakınlaşma veya uzaklaşma vb.


Comments(0):
Bu yazı için henüz bir yorum yapılmamış
Yorum yapabilmeniz için üye olmanız gerekmektedir,(Giriş Yap|| Üye Ol)