loading...

Jiří Hýsek

nájemný programátor

Jsem ostřílený programátor v Ruby on Rails, mám více než 13 let zkušeností v komerční sféře. Praxe mě naučila dbát na spolehlivost, udržovatelnost a použitelnost. Věřím, že nejlepší řešení je to nejjednodušší.

chcete zrealizovat Váš projekt?

 

Multiplatformní mobilní hra krok za krokem, část 2

Multiplafromgamecorona

V předchozím díle jsme si nastavili vývojové prostředí a řekli něco o pozicování a škálování. To dnes budeme potřebovat. Vložíme si na obrazovku oba obrázky, ve kterých budeme hledat rozdíly, samozřejmě s ohledem na různá zařízení a rozlišení.

Nejprve si připravíme obrázek a jeho variantu s rozdíly. Já si koupil ve fotobance obrázek s dinosaury a v Gimpu si udělal upravenou variantu s pěti rozdíly. 

 

Zkopíruji si je do assets/img1.jpg a assets/img2.jpg.

A protože žádné menu dělat nebudeme, přejmenujeme si app/menu.lua na app/game.lua. Pak nezapomeňme v main.lua změnit composer.gotoScene("app.menu") za composer.gotoScene("app.game")

Podíveme se do app/game.lua. Je tam předepsáno pár funkcí. Jmenují se celkem intuitivně - scene:create se volá při vytvoření scény (knihovna composer říká jednotlivým obrazovkám scény). Ta se volá jen jednou. scene:show se volá při zobrazení scény, ta se volá pokaždé, když composer přejde na tuto scénu. scene:hide se volá zase při opuštění scény. Zatím máme pouze jednu scénu a jednu sadu rozdílů, tak využijeme scene:create.

Objekty v Coroně můžeme sdružovat do skupin. Každá scéna v composeru má již vytvořenou skupinu a dostaneme se k ní přes self.view. Pro jednoduchost je šabloně předdefinována proměnná group.

	local group=self.view

Ze všeho nejdřív uděláme bílé pozadí:

	def scene:create(event)
	  local group=self.view
	  display.newRect(group, _W / 2, _H / 2, _W, _H)
	end

A doplníme do ní kód pro zobrazení obrázků:

def scene:create(event)
  local group=self.view
  display.newRect(group, _W / 2, _H / 2, _W, _H)

     local image_left  =display.newImage(group, "assets/img1.jpg", _W / 2, _H / 2)
     local image_right=display.newImage(group, "assets/img2.jpg", _W / 2, _H / 2)
end

První, nepovinný parametr určuje skupinu, do které se objekt zařadí. Druhý parametr cestu obrázku, třetí jeho x-ovou souřadnici, čtvrtý jeho y-ovou souřadnici. Zvýrazněný kód umístí oba obrázky doprostřed obrazovky (na zvolených souřadnicích bude umístěn střed obrázku). Když hru spustíme, vidíme, že to zatím není žádná sláva.

Obrázky jsou umístěny na stejné souřadnici, takže jsou přes sebe a navíc nemají vhodnou velikost. Napravme nejdřív tu velikost. Víme, že bude velký zhruba polovinu šířky obrazovky, tedy _AW / 2.  Nastavit mu tuhle šířku ale nestačí, musíme ve stejném poměru změnit i výšku, aby nebyl obrázek deformovaný.

def scene:create(event)
  local group=self.view
  display.newRect(group, _W / 2, _H / 2, _W, _H)

  local image_left =display.newImage(group, "assets/img1.jpg", _W / 2, _H / 2)
  local image_right=display.newImage(group, "assets/img2.jpg", _W / 2, _H / 2)

  local scale=_AW / 2 / image_left.contentWidth
  image_left:scale(scale, scale)
  image_right:scale(scale, scale)
end

Teď jen posunout obrázky - levý o půl obrázku doleva, pravý o půl obrázku doprava. A aby to na sebe nebylo tak nalepené, uděláme na krajích a uprostřed 10 bodovou mezeru. Což znamená z šířky každého obrázku odebrat 15 bodů a lehce posuneme. Celá funkce nakonec bude vypadat takto:

function scene:create(event)
  local group=self.view
  local image_left=display.newImage(group, data.image_left, 0, _H / 2)
  local image_right=display.newImage(group, data.image_right, 0, _H / 2)

  local scale= (_AW / 2 - 15) / image_left.contentWidth
  image_left:scale(scale, scale)
  image_right:scale(scale, scale)

  image_left.x=_W / 2 - image_left.contentWidth / 2 - 5
  image_right.x=_W / 2 + image_left.contentWidth / 2 + 5
end

Původně jsem chtěl ještě do tohoto článku vměstnat i určení míst, na kterých se nacházejí rozdíly, ale nějak se to protáhlo, tak to napíšu až příště. Zatím jsme ve stavu, kdy se nám vedle sebe zobrazují oba obrázky a to nezávisle na poměru stran obrazovky. Bude se to zobrazovat v pořádku jak na iPadu, který má poměr stran 4:3, tak na telefonu s poměrem stran třeba 16:9.

 

 

Zpět na seznam článků