Ik weet dat Javascript niet de perfecte keuze is om een spelletje mee te maken maar dat het met javascript gemaakt wordt is al besloten. De meesten van jullie kennen vast Pokemon wel op de gameboy, dit idee wil ik namaken via javascript maar moet daarbij een aantal zaken opgelost hebben .. onder andere..
Hoe stel ik de game op? Ik heb nu gewoon een map met allemaal plaatjes waar ik een character op laat lopen. Maar nu is het moeilijk detecteren of het nu een tile is waar ik op kan lopen, of waar ik niet op kan lopen. Dus stel dat ik een soort van grid zou maken, en dan met iets van coördinaten werken. voorbeeld:
Character staat op tile 50 van links en 5 van rechts. Rechts daarvan is een boom, waar je dus niet over heen mag lopen. Dan vraag je de coördinaten op van die tile rechts.. en dan opvragen of die tile beschikbaar is om te lopen of niet.
En hoe stel ik een map op? ik weet dat een grasveld van 5x5 dus 25 tiles heeft, maar om nu 25x de IMG tag te gebruiken.. dit valt toch wel te genereren bijv: map.weet_ik_veel_wat_voor_extensie:
1;2;3;5;2;3;3;3;3;3;3;2;3;4;5
En dan kan bijvoorbeeld javascript deze openen, en dan voor elk cijfer een andere tile pakken..
Wat zeggen jullie ervan? gewoon niet eens proberen, moet ik een gokje wagen? hebben jullie nog informatie of ideeën? fire it all please!
je kan opzich gewoon een plaatje met de bomen ed. erop al gebruiken.
Dan moet je alleen bepalen welke bewegingen toegestaan zijn. Bij pokemon kan je geen diagonale bewegingen maken, dat is wel een aanrader.
Ik zat zo te denken, achtergrond-tiles waar je ALTIJD over heen mag zoals zand, strand of gras daar maak ik gewoon de 'map' van. En daarOP plaats ik het character en verschillende objecten.. bijv een boom, huis, plant waar je niet op kan lopen .. etc
@vinTage
Ik ga even kijken wat ik allemaal met jquery kan doen in dit geval. In ieder geval bedankt.. een array maken met de tiles dat gaat nog wel.. maar moet elk vakje geen 'coordinaten' hebben.. voor het geval je wilt controleren of er rechts van je een tile staat waar je wel op kan staan?
Met jquery css ram je dus gewoon van je grid met divs de background property en IN de div(s) kan je dus al dan niet met je mannetje lopen (niet op iets met id 3 dus)
Ik vond tiles en objecten wel makkelijk, zo kan je onderscheidt maken tussen objecten (waar je niet op kan lopen) en gras waar je dus wel op kan lopen.. En bomen zijn vaak groter dan een tile zoals gras etc, vandaar dat die objecten me wel makkelijk leken, op het plaatsen na.. want zo een object moet al snel even groot zijn als een aantal tiles.. om hitreg te kunnen opvangen..
En in principe werk je toch ook met zand en DAAROP een character?
Het idee van dat raster dat snap ik.. dus gewoon door die array heen lopen en de wereld 'aanmaken'. Maar de zin:
Met jquery css ram je dus gewoon van je grid met divs de background property
is me nog niet echt duidelijk Ik ga dat linkje morgen bekijken en dan hoor je het nog!
Nee, in tile based games zijn "obstakels" niet groter dan EEN tile.
Natuurlijk kan je grotere obstakels maken (bv) door het "te grote" obstakel te "slicen" in meerdere tiles.
Een overduidelijk voorbeeld van een tilebased game is Zelda/marioworld en dat soort brozzel (ouwe nintendo tijdperk)
edit
snap nu wat je bedoeld met zand+boom
je kan idd de background property van "desbetreffende" div een zand-bg meegeven en daarop een boom planten, als de innerHTML van die div leeg is, kan je er wel op lopen, anders niet.
Maar dat is al een vernieuwde versie van tilebased games
Haha, ja ik snap wat je bedoelt met het slicen van die objecten.. aan dat standaard zal ik me voor nu even gaan houden dan.
Bestaat het 'grid' in je hoofd dan uit allemaal divjes? want heb volgende code nu in gebruik en het laden daarvan gaat als een trein (NOT!). Plaatscode.be : Tiles
Werken met divjes leek mij ook al wel zo makkelijk.. maar qua laadtijd is het nu al veel te heavy.. heb nu met divjes geprobeerd.. en m'n browser loopt gewoon vast voor ongeveer 15 seconden, daarna doet hij het.
edit
Ik heb 'misschien' het principe een beetje door, ben nu van mijn character een object aan het maken in plaats van een plaatje in een div die boven de map staat..
Ik heb het al voor elkaar gekregen dat je niet door objecten heen kan lopen.. maar elk divje een ID geven lijkt me niet perfect, ik ga nu proberen om een X en een Y id te gebruiken, dit is makkelijker met het maken van een veld.
De laadtijd is nog steeds veel te hoog.. any solutions? of is dit gewoon Javascript..
Haha, ja ik snap wat je bedoelt met het slicen van die objecten.. aan dat standaard zal ik me voor nu even gaan houden dan.
Bestaat het 'grid' in je hoofd dan uit allemaal divjes? want heb volgende code nu in gebruik en het laden daarvan gaat als een trein (NOT!). Plaatscode.be : Tiles
Werken met divjes leek mij ook al wel zo makkelijk.. maar qua laadtijd is het nu al veel te heavy.. heb nu met divjes geprobeerd.. en m'n browser loopt gewoon vast voor ongeveer 15 seconden, daarna doet hij het.
edit
Ik heb 'misschien' het principe een beetje door, ben nu van mijn character een object aan het maken in plaats van een plaatje in een div die boven de map staat..
Ik heb het al voor elkaar gekregen dat je niet door objecten heen kan lopen.. maar elk divje een ID geven lijkt me niet perfect, ik ga nu proberen om een X en een Y id te gebruiken, dit is makkelijker met het maken van een veld.
De laadtijd is nog steeds veel te hoog.. any solutions? of is dit gewoon Javascript..
installeer firefox en gebruik firebug, hier kan je zien wat veel laadtijd gebruikt ;)
lijkt me geen slecht idee om daarvoor een tabel te gebruiken waarvan je elke cell een apparte ID geeft, dan kan je alsnog css gebruiken om de background-images in te stellen per #id
Idd zoals ontani het hier toont gaat het perfect. Ik kan me niet voorstellen dat zoiets dan 15 sec duurt om te laden. Je laad toch niet de volledige map in 1 keer? Je moet enkel laden wat je op dat moment op het scherm ziet. Om eventueel wat performanter te werken kan je ook al bv 2 rijen laden per zijde die je niet ziet. Al de andere tiles moet je per beweging op de map via ajax gaan ophalen.
Veel gebruikte afbeeldingen kan je ook op voorhand gaan cachen zodat ze niet "at runtime" moeten opgehaald worden van de server.
Ik ben hier ooit aan begonnen in java, er is echt wel heel wat informatie te vinden op het net. Ook over collision detection en dergelijke en hoe je een map met bv bossen, bergen, water ed heel dynamisch kan opbouwen met een heel beperkt aantal afbeeldingen.
De array die vinTage eerder opstelde kende enkel een ID, ik werk nu met X en Y met de volgende formule om het ID te achterhalen:
als X=8 en Y=2, en aantal tiles in de breedte is 16.
2(Y)-1 = 1
1x16 = 16
1 x 8(X) = 8
16+8 = 24.. dat is het ID van de tile op X=8 en Y=2..
Misschien wat omslachtig.. maar het werkt (nog niet 100% maar dat komt omdat ik niet echt heel goed ben ). En zo een array als de jouwe Ontani komt dan ook wel goed van pas..
@cloudstrife
Het duurt echt verschrikkelijk lang om te laden.. ik heb nu een tileset van 28x13.. met tiles van 16x16, omdat het toch op een PC getoond gaat worden. Vraag ik nu te veel van deze programmeertaal?
edit
Ik had sommige reacties niet gelezen, ik maak de map even af en zorg dat het lopen weer werkt.. dan kan ik alles uploaden en kunnen jullie (mocht iemand dat willen) het ook kunnen zien.
Is het gebruik van jquery css sneller dan gewoon javascript.. met het wijzigen van de background-image property?
Ik denk dat de laadtijd komt doordat ik ook de GRID genereer met javascript, maar ik denk dat dit in de toekomst toch zo wordt gedaan omdat er verschillende levels komen.
En het gebruik van een X en Y as i.p.v. één ID dat vind ik gewoon makkelijker werken voor mezelf, als dit eigenlijk echt geen mogelijkheid is dan even aangeven s.v.p.
edit
Heb zojuist je voorbeeld iets aangepast vinTage. De grid wordt nu aangemaakt via javascript.. en daarna worden de plaatjes erin gegoten en dat gaat supersnel, ik heb geen idee wat ik verkeerd heb gedaan maar ik begin opnieuw en doe het op jouw manier. (wel probeer ik een X en Y as )
Heel erg bedankt, laat deze topic nog even open mocht ik er niet uitkomen. Vind het echt TOP hoe jullie me verder hebben geholpen.
Zo een auto grid had ik ook al gemaakt, maar dan met een tabel. Ik heb nog wel een paar vragen m.b.t de programmeerwijze.
1. Grid genereren met javascript/php? wat is sneller?
2. Jquery CSS.. waarom niet Javascript? (.style.background-i..)
3. Jij gebruikt 1x ID, is een X en Y as AF te raden of niet?
Met een X en Y as kan ik namelijk een botsing met een object eenvoudig detecteren.
edit
Sorry dat ik jullie lastig val met deze vragen, zeker nu jullie me al zo hebben geholpen. Maar het zou mooi zijn dat ik bijv. weet dat ik ook php kan gebruiken, dan kan ik code gebruiken die echt in mijn straatje liggen. Wil namelijk liever geen code gebruiken die ik niet echt ken zonder dat het verschil maakt met mijn eigen code.
- php gaat sneller zijn (onafhankelijk van de gebruiker).
- omdat het nu eenmaal overzichtelijker is met een framework en crossbrowser
- Ikzelf raad X en Y aan dus cell_x_y ipv cell_autonum
Ik begrijp niet goed waarom x en y beter zou zijn?
Je kan toch gewoon iets doen met de div waarbij hij dan beloopbaar is, bv
if($('div..').html() == "" ) { beloopbaar }
Waarbij je dus gewoon je obstakels als image in de divs plaatst en dus html() niet leeg is.
Daar staat mijn voorbeeld op, ben benieuwd wat jullie ervan vinden. De map wordt volledig gemaakt in JS, dus geen PHP.
Ik ben nog even te lui om de tiles op te zoeken van de rug en de buik, dus die laat ik nog even zo.. maar weet iemand waarom de map anders is dan hij hoort te zijn? die laatste regel heb ik het dan over.
edit
Ik vind X en Y zowieso heel makkelijk, voor bijvoorbeeld quests.. obstakels, etc.. en zie net dat het lopen niet in IE werkt (TROTS)
Ik heb nu een div, met daarin een steen. Ik sta aan de rechterkant van die steen en ik kijk naar links. Nu druk ik op de 'Z' toets en kijkt hij of er links van het character een object is.
Hij zegt dat er een object staat, maar nu wil ik dat kunnen detecteren zegmaar. Nu kan ik een array maken, php voorbeeld:
"filename"=>"images/objects/rock.png"
"description"=>"Dit is een steen.."
Maar, ik heb niet direct toegang tot attributen van het plaatje, alleen van het divje daaromheen.. hoe kom ik bij de attributen van het plaatje in de desbetreffende div?
enkele tips:
- gebruik sprites ipv individuele images, zo heb ik bij mij het aantal requests kunnen terugdringen van 500 naar 1
- gebruik CDN voor het inladen van een javascript framework
- de mogelijkheden van jQuery eens uitzoeken (ajax, ...)
- ...
Heel héél erg bedankt, ik zal alles doorlopen en zal jullie dan op de hoogte houden.
edit
Dat CDN laat ik nu even voor wat het is en de JQuery functies heb ik nog even achterwege gelaten omdat ik het nog aan het testen was. Ik ga kijken hoe jij het precies hebt gedaan en probeer het even te ontcijferen, ik houdt jullie nog op de hoogte.
Een vraagje
Ik ben even bezig om van je codering te leren, maar ik moet nu een array vullen namelijk: map[y][x] maar dat gaat niet helemaal goed. Bij het aanmaken van de tabel zeg ik in de lus dat map[y][x] bijvoorbeeld 0 wordt, maar als ik hem later opvraag is hij nog steeds undefined. Hier is het voorbeeld
Heel erg bedankt, maar doe voor mij geen moeite hoor.. ik zag trouwens wel dat hij op het voorbeeld dat jij gepost had je niet naar boven en onder kon lopen, en toen ik hem gekopieerd had en alles lokaal had staan ging dat wel.
edit
Hoe kan het dat mijn mapmaker niet de map juist genereert voor jouw source?
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Ik ga dat linkje morgen bekijken en dan hoor je het nog!
Actiefste leden van de maand
