In het vorige artikel zijn we begonnen aan het iPhone-avontuur: de game Mini Plane omzetten naar het iPhone-platform. Ons eerste plaatje staat op het scherm en of het nou een stilstaand plaatje is of een plaatje dat straks gaat bewegen: ze werken allemaal op dezelfde manier.
Ik maak voor de plaatjes gebruik van de zogenaamde OpenGL-mode. Van wat ik overal op internet begreep, is het toch wel de betere oplossing voor snelle games. Het voordeel daarnaast is dat dit ook te gebruiken is op Android en het in de toekomst voor mij dus wat makkelijker kan worden om de spelletjes op beide platformen te maken. Er is gelukkig veel te vinden over programmeren in OpenGL-mode op iPhone en dat maakt het voor mij alleen maar makkelijker. Ik zal in de latere artikelen ook nog wat links geven naar goede resources, tutorials en andere informatie die ik gebruik tijdens het maken van Mini Plane.
Bewegende objecten
Wat de bewegende plaatjes betreft: ik zie games altijd op een vrij simpele manier. Je hebt een speelveld, met daarin objecten. Objecten zijn in dit geval de speler zelf, monsters, bonus-items, muntjes, diamanten, eigenlijk dus alles wat in je spelwereld te vinden is. De objecten doen niets anders dan bewegen van punt A naar punt B, allemaal afhankelijk van de spelregels. Dit kun je op elk spel testen, van het meest simpele spel tot het meest grote miljoenen kostende spel dat je op de Xbox 360 of PS3 kan vinden… ze werken allemaal hetzelfde!
De spelregels kun je heel ingewikkeld maken, of vrij simpel houden. Simpele regels wil overigens niet zeggen dat je spel ook simpel is!
In Mini Plane is het belangrijkste ons vliegtuigje en de regels voor het vliegtuigje zijn vrij simpel: je vliegt van links naar rechts met een bepaalde snelheid en als er verder niets gebeurt, dan daal je steeds sneller en sneller.
Als de speler het scherm aanraakt, dan stijgt het vliegtuig steeds iets sneller. De interactie met de speler is dus vrij simpel en valt onder het concept van ‘one-Button gameplay’: een enkele knop die het spel regelt en in dit geval is het hele iPhone-scherm de actieknop.
Achtergrond maken
Aan alleen een vliegtuig op het scherm kun je nog niet echt zien dat er beweging in zit. Dus we gaan een leuke achtergrond in het spel stoppen, op de manier die bekend staat als een ‘parallax background’. Dit is simpelweg een aantal verschillende lagen die los van elkaar op verschillende snelheden bewegen. De achterste laag is erg langzaam om het idee te wekken dat deze in de verte ligt en de voorste laag gaat sneller omdat deze dichter bij de speler ligt.
Gelukkig heb ik alle plaatjes al klaarliggen van de Android-versie en worden beide versies identiek aan elkaar. Dit omdat ik ook van plan ben de online-highscores in te bouwen, zodat Android- en iPhone-gamers gewoon tegen elkaar voor de nummer 1-positie kunnen vechten. Daarnaast is ook nog eens bijna alle broncode om de plaatjes te bewegen hetzelfde als de Android-versie, dus is het een simpele copy+paste-operatie. Alhoewel, de Mac heeft copy+paste natuurlijk op iets andere toetsen zitten dan ik als Windows-gebruiker gewend ben, dus mijn vingers raken regelmatig de verkeerde toetsen aan!
Na wat gemopper hier en daar hebben we uiteindelijk toch onze parallax layers aan de praat: een wolkenlaag, ver op de achtergrond dus de meest trage qua beweging, daarna een ‘faded achtergrondlaag, die weinig tot geen detail heeft, voor een beetje een mistig idee. En dan nog de meest aanwezige achtergrondlaag, waarin detail zit en die vrij snel over het scherm gaat.
Op Android kun je mooi gebruikmaken van een gradient-shader. Deze gebruik ik dan ook veelvuldig om een mooi luchteffect te maken van donker blauw naar lichtblauw… Helaas kent de iPhone dit niet, maar dat is snel op te lossen door een stilstaand en beeldvullend plaatje te tonen op de achtergrond. Zet daar de parallax-layers op en voilà! Onze bewegende achtergrond is klaar. Om het helemaal af te maken zetten we ons vliegtuigje ook nog op het scherm en kunnen we nog een aantal minuten verslijten, door met een vliegtuigje te vliegen dat verder niets kan! 😉
Zie hier alvast het resultaat met de achtergronden en het vliegtuig:
Taalfout gezien of andere suggestie hoe we dit artikel kunnen verbeteren? Laat het ons weten!
Je bent al een heel eind ;-). Erg leuk om te blijven lezen. Ga zo door. Ik ben persoonlijk ook geïnteresseerd in codesnippets. Ben benieuwd wie nog meer.
de gerelateerde vids laten de volgende fases al zien 😛
@Mike van Hoenselaar: code snippets zijn inderdaad altijd interessant, en misschien is dat een idee voor het laatste artikel waarin ik ook wat links zal geven naar interessante tutorials en websites die ik gebruikt heb om het onder de knie te krijgen.
@Pascal Bestebroer: Dat zou fijn zijn aangezien ik wel eens wil beginnen met het bouwen van apps maar ik nog steeds niet weet waar ik moet beginnen.
Maarja je dagboek is mooi kwa inhoud. Jammer dat er sommige dingen niet mogelijk zijn kwa effecten al wat geleerd ^^
@Pascal Bestebroer: Lijkt me een goed plan. Bijvoorbeeld indelen per odnerwerp.
Zoiets. Denk dat enorm veel mensen daar mee geholpen zijn. Misschien mag je nog wel een cursus gaan geven op Universiteit Leiden ;-).
zoek even op joris dormans op google. Is mijn game design docent geweest op de hogeschool van amsterdam. Hij is echt goed in games bedenken. Misschien wil hij je wel helpen want hij is wel zo iemand!
bij phase 5 ziet het er al mooi uit
Als dat zou kunnen dan zou het echt geniaal zijn!
Geweldig dit is nou echt boeiend om te lezen ga zo door !
( als je ooit een beta tester zoekt^^)
Haha
Maar ff serieus ga zo door dit is evht boeiend.
Erg leuk om te lezen, leerzaam ook. Codesnippets zou echt fantastisch zijn.
dit is nep de hele game is al af
mooi kopieer werk
@wouter: de artikelen lopen, logischer wijs, achter op het ontwikkelen van het spel zelf. We zijn inderdaad al zover dat het spel bijna af is op kleine afwerking na.
Er is dus niets nep aan deze artikelen, ze zijn het dagboek van hoe het spel is opgebouwd stap voor stap. De Android versie is wel al af en verkrijgbaar, maar ook daar nog steeds geen kopieer werk aangezien die ook door mij ontwikkelt is.
@Pascal Bestebroer: oke bedankt voor je uitleg ik begreep het even niet meer
Ik wil je wel nadrukkelijk vragen voortaan wat voorzichtiger te zijn in je commentaar. Dit is op het randje van smaad en reden om je uit te sluiten van verdere reactiemogelijkheden.
Ik vind dat je geweldig bezig bent en het op een leuke manier weet te vertellen!!! Ga zo door ik geniet er elke keer van om de vorderingen te lezen.
@Jean-Paul Horn: sorry mensen ik ben voortaan wat voorzichtiger.
Top om te lezen! Erg interessant! Ik kijk uit naar de tutorialtips en eventuele codesnippets 🙂
@dutchie:
Dat testen is mijn werk he… 😛
Kost het geen geld om een app te ontwikkelen? Ik dacht dat je geld moest betalen voor zo’n abbo bij apple, en dan ook nog de software… Dus betaal je die bak geld, of is dit gejailbreakt oid?
99 dollar valt best mee voor een jaar…
@Dolor: Je betaald iets van 75 euro per jaar om te mogen ontwikkelen voor de iPhone.. de tools zijn verder gratis en je hoeft je iphone/ipod ook niet te jailbreaken.
Er zijn ook manieren om het anders te doen, maar daar hou ik me niet mee bezig, plus dat je dan nog steeds apple moet betalen als je je app/game op de App markt wilt zien 😉
Bij Android is het overigens zo dat je 1 malig 50 euro betaald en je dan vrij bent om te doen en laten wat je wilt, en ligt de drempel voor hobbyisten dus al een stuk lager (ook omdat er geen goedkeuring nodig is om je App op de Android markt te zetten, wat bij Apple wel het geval is)
Als bedrijf is het echter een normale investering om te doen.
@Pascal Bestebroer:
als bedrijf vast wel ja, maar het is iets te veel geld voor mij ^^ hoe weet je zeker dat je dat geld terugverdient… voor hetzelfde geld wordt ie nooit gedownload, omdat je onbekend bent… eenmalig 50 euro klinkt nog wel te doen ja, omdat je dan ook zeker weet dat hij in de store komt, en dat heb je dus niet bij apple… en met jailbreaken bedoelde ik dus waarschijnlijk een van die ‘manieren om het anders te doen’, dus niet dat je dat moest doen als je legaal apps wilde ontwikkelen 😉
Ik zou ook wel meer uitleg over de code en ontwikkeling ervan leuk vinden. Ikzelf ben goochelaar en als ik uitleg hoe een knoop uit een touw verdwijnt en ik zeg ‘je neemt touw en doet er een schuifknoop in en dan laat je die verdwijnen’ weet je nog niet hoe je dit voor mekaar breng. Heb al verschillende tutorials gelezen over het maken van apps maar nooit tot je weet hoe het juist in elkaar zit. Leuk om te lezen wel maar zou iets uitgebreider mogen voor mij. Gday
@Kurt Spontini: Het probleem daarmee is dat het dan al vrij snel een artikel wordt voor een kleinere doel groep. Ik probeer waar mogelijk uit te leggen hoe dingen gedaan worden zonder echt de technische code te geven die waarschijnlijk voor een hele hoop mensen inderdaad abracadabra is 😉
Ik heb er zelf geen probleem mee om de code te delen, maar ik denk niet dat deze site voor een breed publiek daar het platform voor is.
@Pascal Bestebroer: Het is nu juist dat onderdeel van het maken van een app dat ik overall bij een ‘dag boek’ of ‘maken van’ mis bij zo’n uitleg dat is de opbouw en code van zo’n app. Is er geen boek ‘App maken voor Dummies’ of zoiets zodat ik geen boeken moet doorworstellen waaruit ik dan toch niet of nauwelijks iets van opsteek?
@Kurt Spontini: Maar dan kom je al snel uit bij les geven in programmeren 😉 en dat is niet het doel van dit dagboek. App maken voor dummies zal dus gewoon een “Programmeren voor dummies” boek zijn.