login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Pokemon slide/clip effect (Opgelost)

Offline Erwt - 26/02/2011 12:41 (laatste wijziging 27/02/2011 19:38)
Avatar van ErwtPHP beginner Hej allemaal,

Ik heb geen idee hoe ik het moet maken, of hoe ik moet gaan beginnen..
Wat ik dus graag wil: Het Pokemon effect namaken. Wat ik daarmee bedoel is: Er wordt een map gerenderd, en vervolgens zie je daar maar bijvoorbeeld 200x200px van, en als je 1 blokje naar rechts loopt, dan zie je van links 1 blokje minder, en rechts 1 blokje meer. Oftewel: Als je loopt, gaat het beeld mee. Iemand enig idee/tips die ik zou kunnen gebruiken?

Groeten,

Erwin

// Edit: Heb een voorbeeldje gemaakt met die backgroundPosition: Klik hier!
Pijltjestoetsen gebruiken! (Getest in FF, Chrome)

11 antwoorden

Gesponsorde links
Offline Joost - 26/02/2011 13:55
Avatar van Joost PHP expert Dit heet een tile-based game, google er maar eens op 

Er zijn verschillende JavaScript engines voor beschikbaar, bijvoorbeeld gTile: http://game.tyler-dewitt.com/
Offline Erwt - 26/02/2011 14:41
Avatar van Erwt PHP beginner Ik weet dat het een tile-based game is, maar voor mensen die dat allemaal niet weten.. is het uitleggen best lastig 

Maar ik bedoelde eigenlijk meer, hoe zou ik dat zelf kunnen maken? oftewel, hoe zou een technisch ontwerp van die functionaliteit eruit zien.. ik wil het namelijk graag zelf maken, zonder het direct te 'jatten'.
Offline valles10 - 26/02/2011 14:55
Avatar van valles10 HTML interesse ik zou zeggen:
Je hebt een div, met een bg image. De bg-image is de map. Als je naar rechts loopt, zorg je dat de positie van je bg in die div opschuift.
Offline Joost - 26/02/2011 15:09 (laatste wijziging 26/02/2011 15:09)
Avatar van Joost PHP expert Wat ik zo snel even kan verzinnen...:

Mijn eerste idee daar zou zijn dat je met cellen, een grid en een map werkt. Elke cel is 10x10 pixel. De grid is 210x210 pixels, daar passen dus 121 cellen op. De achtergrond afbeelding van de grid is de map.

Allereerst maak je de map. Dit is een afbeelding van het hele gebied wat je kan zien als je rondloopt. Hierop kan je al bomen maken, water, paden, huizen, etc. Hierbij moet je rekening houden dat er op elke 10x10 pixels 'iets' moet zijn.

Als je dan het grid initialiseert laad je de eerste 210x210 pixels van je map in als achtergrondafbeelding. Je 'poppetje' zet je in de middelste cel, (11,11). De map moet dan zo gepositioneerd zijn als achtergrond dat het poppetje op de goede plek staat. Wanneer de gebruiker nu op zijn toetsenbord naar rechts drukt, wordt de cel waar het poppetje zich bevindt (12,11). De achtergrond map schuif je dan 10 pixels naar links op, waardoor het lijkt alsof je naar rechts loopt.

Bij elke nieuwe coordinaat waar de gebruiker terecht komt kan je een functie aanroepen die kijkt of er wat moet gebeuren op die plek.


Een spelletje zal grofweg zo werken..
Offline Erwt - 26/02/2011 15:53 (laatste wijziging 26/02/2011 15:55)
Avatar van Erwt PHP beginner Ik heb een tijd geleden al iets gemaakt dat ik aan het verbeteren ben:

http://www.detoesebolle.nl/rpg/
test - test

Dat doe ik met een plaatje waar alle tiles in staan, met een backgroundPosition. En de map die staat in een .txt bestand met de volgende notatie: http://detoesebolle.nl/rpg/maps/tutorial1.txt

Bovenste zijn de tiles, onderste zijn de 'objects' die geplaatst worden, denk dat je het wel begrijpt. Maar ik heb gemerkt dat de code om mijn map te 'renderen' aardig zwaar lijkt op sommige momenten. Dus ik heb liever niet dat hij de map opnieuw 'maakt' maar dat hij de hele map in het begin maakt, en dat je tijdens het lopen alleen de tiles laat zien wat nodig is, en ik vraag me dus sterk af hoe ik dat in vredesnaam moet gaan doen 

En bedankt nog voor alle tips tot nu toe!

// edit:
Ik wil hier dus eigenlijk mee zeggen dat ik geen achtergrond plaatje heb waarbij ik domweg de backgroundPosition wijzig, en klaar.
Offline Joost - 26/02/2011 16:54 (laatste wijziging 26/02/2011 16:55)
Avatar van Joost PHP expert En het is geen optie om op die methode over te stappen? Renderen kost gewoon veel meer tijd als je dat niet cached...
Offline Erwt - 26/02/2011 17:21
Avatar van Erwt PHP beginner Ja, dat is dus nu mijn volgende stap.. Want ik heb een map editor gemaakt.. en ik kan wel zonder map editor, maar objecten kan ik niet in een img steken en dan checken op collission.. hoe moet ik dat dan weer doen? 
Offline Joost - 26/02/2011 17:26
Avatar van Joost PHP expert Je zou bijvoorbeeld coördinaten in een array kunnen zetten waar de gebruiker niet op kan, zeg maar. Als er meerder acties zijn (bijvoorbeeld een ander scherm initiëren of iets dergelijks) kan je gewoon een array maken met informatie over wat voor 'call' er gemaakt moet worden.

Jouw oplossing is wel flexibeler denk ik, maar ook zwaarder voor de browser. Misschien kan je een applicatie ernaast maken die onze beide oplossingen combineert; Aan jou te bepalen wat in jouw geval het handigste is 
Offline Erwt - 26/02/2011 17:29
Avatar van Erwt PHP beginner Ja, ik kan met de GD LIB wel een map editor maken.. maar het gaat er nu juist om dat dat 'Pokemon effect' niet kon worden behaald d.m.v. losse img's zoals ik dat deed. Maar met de objecten doe ik dat ook, dus dan krijg je toch dat zelfde probleem? Want ik heb inderdaad een 2dimensionale array die de waarde null hebben, of waar een object in staat. Maar dat kan ik dan toch niet op jouw manier doen?
Offline valles10 - 26/02/2011 19:16
Avatar van valles10 HTML interesse Ja wel, zoals hier in dit topic al eens min of meer is vermeld en zoals in vele games worden gedaan:
Maak een script dat een file uitleest met daarin waardes in. De waardes stellen bepaalde voorwerpen voor. Bijvoorbeeld 0 is waar je kan rijden en 1 is water. a is een muur en b een object dat je kan oppakken ofzo.
Offline Erwt - 27/02/2011 14:05 (laatste wijziging 28/02/2011 17:41)
Avatar van Erwt PHP beginner Ja, en zoals ik al meerdere malen heb gezegd (en zoals je ook kon zien in het voorbeeld) heb ik dat allang gemaakt!

Het probleem is enkel dat we de conclusie hadden getrokken dat je het 'level' beter in 1 plaatje kan maken, zodat je backgroundPosition kan gebruiken. Maar, met objecten zal dat niet gaan.

Edit: Ik merk dat als ik met een achtergrond en backgroundPosition werk, dat ik dan veel dingen anders zal moeten doen, en sommige dingen moeilijker worden, je kan het zien in het voorbeeld. Omdat de achtergrond draait, lijkt het poppetje te lopen, maar als de background niet meer moet draaien, moet het poppetje alsnog lopen zonder dat de background meegaat.. etc. etc.

Edit: Ik begreep je eerst verkeerd valles. Maar dat betekend dus dat ik objecten in het plaatje moet stoppen, en colissions van X en Y waarde in bijv een array op moet slaan. Dan kan je dus geen objecten van de grond pakken, aangezien die in het plaatje zit verwerkt.. maar denk dat ik dat ook niet wil.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.165s