Corona SDK – Resim Yükleme, Vektörel Nesneler Oluşturma, Android İçin Apk Oluşturma


Merhaba arkadaşlar, bu dersimizde Corona SDK ile alakalı temel, önemli bazı konuları işleyeceğiz. Bu dersin sonunda şu konuları uygulamalı örnekler ile birlikte öğrenmiş olacaksınız :

  • Resim Yükleme
  • Vektörel Nesneler Oluşturma(kare, diktörtgen, çember vb.)
  • Android İçin Apk Oluşturma

Resim Yükleme

Bildiğiniz gibi birçok oyunda hemen hemen herşey birer resimdir. Örneğin arkaplan, oyundaki ana karekter, menüdeki simgeler, ikonlar vs bunların her biri resimdir. Tabi ki illa resim/imaj olmak zorunda değiller. Bu nedenlerle bir oyunda resimlerin yüklenmesi, gösterilmesi, boyutunun modifiye edilmesi, anime edilmesi vs konuları çok önemlidir.

ÖNEMLİ NOT: ÖRNEK UYGULAMA CORONA SIMULATOR 2015.27.31 İLE TEST EDİLMİŞTİR. TEST EDİLİRKEN CİHAZ OLARAK Android(xxhdpi) CİHAZI SEÇİLMİŞTİR. LÜTFEN TÜM TESTLERİ BU CİHAZDA YAPINIZ. İÇERİĞİN EKRAN BOYUTUNA VE ÇÖZÜNÜRLÜĞÜNE GÖRE OPTİMİZASYONU KONULARINI İLERİKİ DERSLERİMİZDE ANLATACAĞIM. SABIRLI OLUN BİRAZ DAHA YOLUMUZ VAR :)

1. Corona Simulator ü çalıştırın. NEW PROJECT butonu ile yeni bir proje başlatın.

2. Application Name kısmına ben örnek amaçlı CoronaTutorial adını verdim siz de bunu veya başka birşey girebilirsiniz. Daha sonra OK butonuna tıklayarak bitirin. Corona Simulator in projeyi oluşturmasını, proje klasörünü açmasını ve simulatörde projeyi çalıştırmasını göreceksiniz. Şimdilik karşınıza boş ve siyah bir ekran gelecektir.

3. Oluşturulan proje klasörüne gidin ve config.lua dosyasını herhangi bir text editörde açın.

Aşağıdaki değişiklikleri yapıp dosyayı kaydedin.

width = 320 --> width = width
height = 480 --> height = height

4. Oluşturulan proje klasörüne gidin ve main.lua dosyasını herhangi bir text editörde açın. Ve içeriği aşağıda verdiğim satırlar ile değiştirip kaydedin.

-- durum çubuğunu kaldırma
display.setStatusBar(display.HiddenStatusBar)

-- arkaplan rengi beyaz bir dikdörtgen oluşturma
local mainBg = display.newRect(display.contentCenterX,display.contentCenterY,display.contentWidth, display.contentHeight)

Ne Yaptık ? Kod içerisine açıklamalar bıraktım lütfen onlara göz atın. Bildirim çubuğunu kaldırdık ve cihaz ekranı büyüklüğünde bir dikdörtgen oluşturduk.

Bu adımdan sonra simulatörde karşınıza şöyle bir ekran gelmiş olmalıdır :

enter image description here
5. Şimdi örneğimizi sadece landscape(yatay) modu destekleyecek şekilde değiştirelim. build.settings dosyasını açın ve aşağıda verdiğim gibi varsayılan(default) ve desteklenen(supported) ekran yönünü landscape olarak değiştirin. Kaydedip projeyi tekrar çalıştırdığında simulatörün yatay modda çalıştığını göreceksiniz.

6. Proje klasörü içine images adında bir klasör oluşturun. Ve aşağıda verdiğim resmi örnek amaçlı main_bg.jpg adıyla açtığımız images klasörüne kopyalayın.

enter image description here

7. main.lua dosyasına bu resmi arkaplan olarak kullanmak için şu kodları ekleyin:

-- arkaplan görseli
local mainBgImage = display.newImage("images/main_bg.jpg")
-- görselin x pozisyonunu cihaz ekran genişliğinin ortası olarak ayarlıyoruz
mainBgImage.x = display.contentCenterX
-- görselin y pozisyonunu cihaz ekran yüksekliğinin ortası olarak ayarlıyoruz
mainBgImage.y = display.contentCenterY

Kod içine okumanız için açıklamalar bıraktım ihmal etmeyin :). Bu adımdan sonra simulatördeki görüntü şöyle olacaktır :

enter image description here

Vektörel Nesneler Oluşturma

Vektörel nesnelerden kastımız nedir ? Kastımız çizgi, dikdörtgen, kare, çember gibi nesnelerdir. Şimdi bunları tek tek nasıl oluşturabileceğiniz göreceğiz.

Çizgi Oluşturma

Corona SDK da çizgi vektörel nesneler display kütüphanesindeki newLine() fonksiyonu ile oluşturulur.

8. Ekranın sol üst köşesinden sağ üst köşesine uzanan, rengi beyaz olan, kalınlığı 8 px olan bir çizgi çizmek için aşağıdaki kodları main.lua dosyasına ekleyin ve kaydedin.

-- çizgi çizme
local line = display.newLine( 0, 0, display.contentWidth,display.contentHeight )
line:setStrokeColor( 1, 1, 1, 1 )
line.strokeWidth = 8

Bu adımdan sonra ekranda göreceğiniz görüntü şöyle olmalıdır :

enter image description here

Dikdörtgen Çizme

Aslında bunu bir önceki dersimizde de bu dersimizde de yaptık. Corona SDK da dikdörtgen display kütüphanesindeki newRect() fonksiyonu ile çizilir.

9. Örnek : Kod içine açıklamalar bıraktım, ayrıcana tekrar açıklama yapmayacağım.

-- dikdörtgen çizme
-- 500px x 300 px büyüklüğünde bir dikdörtgen oluşturma
local rectangle = display.newRect( 0, 0, 500, 300 )
-- ekranın ortasına pozisyonlandırma
rectangle.x = display.contentCenterX
rectangle.y = display.contentCenterY
-- dikdörtgenin kenarlık kalınlığını ayarlama
rectangle.strokeWidth = 4
-- dikdörtgen rengini ayarlama
rectangle:setFillColor(1,1,1,0.5 )
-- dikdörgen kenarlık rengini ayarlama
rectangle:setStrokeColor( 0, 1, 0 )

Sonuç :

enter image description here

Kare Çizme

Kare çizmek için yine newRect() fonksiyonunu kullanıp genişliği ve yüksekliği eşit olan bir dikdörtgen(yani kare) çizdireceğiz.

10. Örnek :

-- kare çizme
local square = display.newRect( 0, 0, 250, 250 )
square.x = display.contentCenterX
square.y = display.contentCenterY
square.strokeWidth = 4
square:setFillColor(0,0,1,0.5 )
square:setStrokeColor( 1, 1, 0 )

Sonuç :

enter image description here

Çember veya Daire Çizme

Corona SDK da çember veya daire display kütüphanesindeki newCircle() fonksiyonu ile çizdirilir.

11. Örnek :

-- çember veya daire çizme
-- merkezi (300,ekran yüksekliğinin yarısı) olan
-- 200 px yarıçaplı
-- rengi beyaz
-- kenarlık kalınlığı 10 px
-- kenarlık rengi grinin açık bir tonu
-- olan bir daire çizdiriyoruz
local circle = display.newCircle( 300, display.contentCenterY, 200 )
circle:setFillColor( 1,1,1 )
circle.strokeWidth = 10
circle:setStrokeColor( 0.7, 0.7, 0.7 )

Sonuç:

enter image description here

Bunların dışında display kütüphanesinde daha birçok işlevsel fonksiyon var. Bunların tamamına şuradan göz atabilir, detaylarını inceleyebilirsiniz.

ÖNEMLİ NOT: ÖRNEK UYGULAMA CORONA SIMULATOR 2015.27.31 İLE TEST EDİLMİŞTİR. TEST EDİLİRKEN CİHAZ OLARAK Android(xxhdpi) CİHAZI SEÇİLMİŞTİR. LÜTFEN TÜM TESTLERİ BU CİHAZDA YAPINIZ. İÇERİĞİN EKRAN BOYUTUNA VE ÇÖZÜNÜRLÜĞÜNE GÖRE OPTİMİZASYONU KONULARINI İLERİKİ DERSLERİMİZDE ANLATACAĞIM. SABIRLI OLUN BİRAZ DAHA YOLUMUZ VAR :)

Android İçin Apk Oluşturma

Corona SDK ile oyun geliştirirken geliştirmeyi pc de testleri Corona Simulator da yaparsınız. Gerçek bir cihazda veya bir Android Emülatöründe test etmek isterseniz öncelikle projenizi built/inşa etmeniz gerekir.

Android için built/inşa etme işlemiyle sonuçta oyununuzun apk si oluşturulur. Android için inşa işlemini bir pc veya mac te yapabilirsiniz.

iOS için built/inşa etme işlemini sadece mac bir bilgisayarda yapabilirsiniz. Windows ta built edemezsiniz.

Windows Phone için built/inşa işlemi henüz betadır.

12. Corona Simulator da üst menüden File > Build > Android i seçin. Veya Ctrl + B kısayolu ile de yapabilirsiniz.

enter image description here

13. Karşınıza Android Build Setup penceresi çıkacaktır. Burada formdaki seçenekleri ihtiyacınıza göre girin/değiştirin/düzenleyin. Daha önce blogumdan dersleri takip ettiyseniz formdaki bütün seçenekler hakkında bilginiz vardır. Formu doldurduktan sonra Build butonuna tıklayıp Corona Simulator in projeyi built/inşa etmesini bekleyelim.

enter image description here

Sonuçta formda varsayılan olarak gösterilen dosya yolunda veya değiştirdiyseniz belirttiğiniz dosya yolunda projeye ait Android cihaz veya emülatörlere kurup test edebileceğiniz bir apk çıkacaktır.

enter image description here

Peyam – Gazeteler

tanıtım_gorsel

Peyam ile gündemi kolay, akıllı,
ücretsiz ve hızlı yoldan yakalayın.

Peyam Osmanlıcada Haber demektir bunu biliyor muydunuz?

Kaynak Kod

Bunun gibi birçok ders hazırlayıp yayınlamak istiyoruz ancak bunun için gerçekten ciddi desteğe ihtiyacımız var arkadaşlar. Lütfen 1 dakikanızı ayırıp bu dersi facebook veya twitter hesabınız üzerinden paylaşarak bize destek olun.

Corona SDK hakkındaki ikinici dersimizin sonuna geldik, umarım yararlı olmuştur. Corona SDK hakkında yeni dersler için Android Evreni’ni takipte kalın! :)
İyi Çalışmalar Herkese!

Şunlar da ilginizi çekebilir

LEAVE A COMMENT