When it's done moving the player, it'll check to see if you're still holding one of the direction keys. If so, it does the same as before. If not, it changes the global var to false again.
Hmm I see well I will be sure to try that I'm still familiarizing myself with javascript but I'm this project will help me get more experienced in javascript. Thanks Jext and Raven your help is very much appreciated.
I remember my first Pokengine draft. The movement was quite slow and using way too much CPU (you might wanna keep track of that as well, plus memory usage). Loading maps was done using a fade-out system, sending a server request to get the new map's data. Right now, movement is as fast as it can possibly get, and even does well on slower computers. Loading other maps isn't even visible anymore, so the entire world looks like one big map. So you'll get better too, I'm sure.
If it is, it sets it to true and does the movement (which should be another function, to actually move the player. Let's call it playerWalk.) In playerWalk, it'll move your player a few pixels each time the function repeats itself, until it's done. My MMO uses 16x16 grids, so each move is a total of 16 pixels, and it moves 2px every time the playerWalk function is fired (so it repeats itself 8 times.)
As for the continuous key checking, assigning a KEYDOWN event to the window object would make it so it fires that event as long as you're pressing a key. Let's say it fires off your playerMove() function. In that function, you'll be doing the collision checking as well as detecting which direction to move, etc. Now, that function'll fire off continuously, which wouldn't be very sufficient. So, in playerMove() you'll be checking a global variable, to see if it's false.
Don't make it PHP-dependent either, there really isn't any need. Instead, make movement client-side. Meaning, use JS arrays to check whether a grid is solid or not (or even check for signs). Then use a single server request when needed to save your position (if you must, you could still check if it's legit, so player's won't cheat their way into a wall or something; in that case it simply won't save their new position), without it returning an approval. This way there'll be no wait times.
Good. Javascript really is your friend when it comes to AJAX games. PHP (server requests) should only be used when necessary, eg. when sending stats, or loading new levels.
I just finished moving movement to a javascript array. It is truly the difference between night and day.
I was wondering how you managed to change the background and load the new map arrau when they go over the door in the array say of value 2. I managed to load fire off a popup when they walk into/over the door, and I can easily enough use a DOM onload ajax request to change the map, but the map array is what I am stumped on.
Without a page refresh I see no way of loading the new array. help.
You could disable movement, send a server request, which would then output the new JS arrays along with a piece of code to enable movement again. That's how I used to do it, like in my latest video with the zelda views. It gets all the necessary values, eg map filename, collisions, signs, map width/height, etc. And then it'll use one of my functions to change the background/player position. My new way involves browser caching, so you have no load-times. Remember to keep your AJAX output small.
I think I understand. I guess I will try out what I think you said and postback with the result. Also on your game how do you make the map scroll instead of the character I really have no clue.
To make the map scroll, you can either re-render the whole map, or you can pre-render the entire map segment, and just use the scrollBy method to keep the view area centered on your character as it moves (this is what I do for my game... I should warn that it doesn't work very well in any version of IE I have tried.. but it seems to work on firefox and chrome perfectly).
Wow that is amazing I never thought to use the DOM in that way. Basicly it moves the map in the background instead of the character. I can see how it would work but I have a few questions, what would prevent the user from viewing the background image and seeing the whole map? Do you use the px of the scroll amount as a variable to check the array for collisions? I will definitely try to use that method but right now it is a bit overwhelming.
People could view the maps, sure. Not really bothered, since most people already know them. Plus I doubt a lot of people would go through all the trouble. Maybe you could write a PHP script to prevent direct viewing. Like add a cookie with the current time stamp, expiring in 2s, link to the PHP file that'll output the image, if the cookie doesn't exist/wasn't made within 2s, it won't output. Delete the cookie. Quite a hassle, and cache will basically save a copy of the map on their HDs anyway.
Kinda. I'll try to explain a bit. There are two global vars containing the map's X and Y values. I use math to calculate their values, so the player will always be in the center. Let's say the player starts at 128,96. Screen size is 240x160. So, the map's X value would be... 128-(240/2), so it'd be at 8 (+8 for me; Pokemon style). Meaning, the map's upper-left corner would be drawn at -8,-16. Map's Y value being (96-(160/2)).
The biggest problem I am now facing is that since php variables can later javascript but javascript variables cannot alter php even with ajax requests I cannot seem to get the new maps to load when the user enters a door.
The ajax can tell they entered a door but without passing through php variables there is no way to tell the main script to change the map.
Basically it can pass through the visual ie: echo but not the variable ie: $changemap
I know there should be some replace method with the DOM to replace the divs background element but I cannot seem to get it to work. I tried echo the script that would change the background with an ajax request and an onload command for the DOM, but it didn't work for some reason.
I meant Zelda-like view sliding; the scrolling. ScrollBy doesn't sound very effective. I used a lot of math to make it work, yet it's fast enough. So basically, a lot of math. :P I also use the canvas element a lot, as opposed to div's with huge sizes. Might wanna look it up.
The canvas element is a way to draw directly to that element. You can take images from the server, even take parts from that image, and draw them as you like. So instead of having a 1024x2048 sized div, you'd have a 240x160 canvas element. Drawing is faster then moving a div around. The only downside is text, but you could use small divs for that. Personally I'm using a sprite font.
Hmm I see so you are basically cropping them to the size of the map you want at certain x and y coordinates on the fly? I definitely see how that would be useful. I will have to study up on it further.
I just had an idea text could be a div with a php dynamic image with text passed through it with a get command and displayed as the divs background that would make it much neater =]
Keep in mind that most browsers are only configured to use a maximum of 6 connections, and only 2 for any given host. This won't have much effect when you're testing on your localhost, because of the very low latency. However, it can be a real bottleneck for even relatively low latency connections over the internet.
Just something to keep in mind if you're planning on pursuing this.
You should move away from dynamically generating the fight images. It might work great on your localhost or LAN, but as soon as you put it on the internet, you will see your framerate drop massively. The reason being that you need to not only make a connection to the server to see what the next frame should but, but also make ANOTHER connection to download the image for that frame. Even with a ping of 50ms, your game will crawl.
It is already online this was not on localhost =] and the fight is not from the server it uses the DOM to overlay a div over the hp and javascript to check what the new hp is the fighting is the most well done so far and will be shown on the next video.
My apologies. You said in the description that battling involved dynamic images, I thought you meant the actual fighting moves, not just the HP... ^^
That's basically how I do the health bar, except rather than overlaying a separate div over the healthbar, I just have 10 different images to reflect how much health. Obviously you can't get a very high resolution that way, but that was how the artist wanted it done so *shrug*... I figured I'd save a div.
The initial battle load uses a php dynamic image loaded as the background through a ajax request. The following attacks however do not send any server queries until the battle is over which then sends another ajax request.
I did in this video but I have now turned it into a php array. I have a few theories using microtime on how to make a keydown and keyup event to make it move continuously without having to keep pressing the buttons but it would require over 600 separate gifs and 2 queries which I think makes it a bad idea. I would love to get your take on how to make movement continuous. I only have knowledge in php this is my first time using any sort of javascript or ajax.
To make movement continuous, you will need to use a game state prediction algorithm. Instead of telling the server you want to move somewhere, then waiting for the server to tell you it's a legal move, you need to load the locations of all the static object on the client, as well as the dynamic objects (players monsters) and "guess" whether the place you want to move is legal or not. You will then move there. If it was a legal move, then great. If not, you'll "Rubber Band"
I believe the php handles queries to the database which saved location and would be used with the ajax to find others on the same map.
Strongbadunit2 10 months ago
@Strongbadunit2 this is just what my plataform does, watch?v=qRefM8FE8vQ
NandoOnGuitar 2 weeks ago
in an mmorpg what would php be used for?
XXFailzzzXX 1 year ago
THUMBS UP IF YOUR HERE COZ OF OMERRRRRR
DarenHD 1 year ago 4
I didn't realize my mic was on until after uploading it. I see no need for anger... Are you generally just a mad person or did you have a bad day?
IncludeAustin 2 years ago
When it's done moving the player, it'll check to see if you're still holding one of the direction keys. If so, it does the same as before. If not, it changes the global var to false again.
Jextwisdom 2 years ago
Hmm I see well I will be sure to try that I'm still familiarizing myself with javascript but I'm this project will help me get more experienced in javascript. Thanks Jext and Raven your help is very much appreciated.
IncludeAustin 2 years ago
I remember my first Pokengine draft. The movement was quite slow and using way too much CPU (you might wanna keep track of that as well, plus memory usage). Loading maps was done using a fade-out system, sending a server request to get the new map's data. Right now, movement is as fast as it can possibly get, and even does well on slower computers. Loading other maps isn't even visible anymore, so the entire world looks like one big map. So you'll get better too, I'm sure.
Jextwisdom 2 years ago
If it is, it sets it to true and does the movement (which should be another function, to actually move the player. Let's call it playerWalk.) In playerWalk, it'll move your player a few pixels each time the function repeats itself, until it's done. My MMO uses 16x16 grids, so each move is a total of 16 pixels, and it moves 2px every time the playerWalk function is fired (so it repeats itself 8 times.)
Jextwisdom 2 years ago
As for the continuous key checking, assigning a KEYDOWN event to the window object would make it so it fires that event as long as you're pressing a key. Let's say it fires off your playerMove() function. In that function, you'll be doing the collision checking as well as detecting which direction to move, etc. Now, that function'll fire off continuously, which wouldn't be very sufficient. So, in playerMove() you'll be checking a global variable, to see if it's false.
Jextwisdom 2 years ago
Don't make it PHP-dependent either, there really isn't any need. Instead, make movement client-side. Meaning, use JS arrays to check whether a grid is solid or not (or even check for signs). Then use a single server request when needed to save your position (if you must, you could still check if it's legit, so player's won't cheat their way into a wall or something; in that case it simply won't save their new position), without it returning an approval. This way there'll be no wait times.
Jextwisdom 2 years ago
I am now using a php 2D array but will be soon switching the movement over to javascript.
IncludeAustin 2 years ago
Good. Javascript really is your friend when it comes to AJAX games. PHP (server requests) should only be used when necessary, eg. when sending stats, or loading new levels.
Jextwisdom 2 years ago
I just finished moving movement to a javascript array. It is truly the difference between night and day.
I was wondering how you managed to change the background and load the new map arrau when they go over the door in the array say of value 2. I managed to load fire off a popup when they walk into/over the door, and I can easily enough use a DOM onload ajax request to change the map, but the map array is what I am stumped on.
Without a page refresh I see no way of loading the new array. help.
IncludeAustin 2 years ago
You could disable movement, send a server request, which would then output the new JS arrays along with a piece of code to enable movement again. That's how I used to do it, like in my latest video with the zelda views. It gets all the necessary values, eg map filename, collisions, signs, map width/height, etc. And then it'll use one of my functions to change the background/player position. My new way involves browser caching, so you have no load-times. Remember to keep your AJAX output small.
Jextwisdom 2 years ago
I think I understand. I guess I will try out what I think you said and postback with the result. Also on your game how do you make the map scroll instead of the character I really have no clue.
(What zelda video?)
IncludeAustin 2 years ago
To make the map scroll, you can either re-render the whole map, or you can pre-render the entire map segment, and just use the scrollBy method to keep the view area centered on your character as it moves (this is what I do for my game... I should warn that it doesn't work very well in any version of IE I have tried.. but it seems to work on firefox and chrome perfectly).
RavensxShadow 2 years ago
Wow that is amazing I never thought to use the DOM in that way. Basicly it moves the map in the background instead of the character. I can see how it would work but I have a few questions, what would prevent the user from viewing the background image and seeing the whole map? Do you use the px of the scroll amount as a variable to check the array for collisions? I will definitely try to use that method but right now it is a bit overwhelming.
IncludeAustin 2 years ago
People could view the maps, sure. Not really bothered, since most people already know them. Plus I doubt a lot of people would go through all the trouble. Maybe you could write a PHP script to prevent direct viewing. Like add a cookie with the current time stamp, expiring in 2s, link to the PHP file that'll output the image, if the cookie doesn't exist/wasn't made within 2s, it won't output. Delete the cookie. Quite a hassle, and cache will basically save a copy of the map on their HDs anyway.
Jextwisdom 2 years ago
Kinda. I'll try to explain a bit. There are two global vars containing the map's X and Y values. I use math to calculate their values, so the player will always be in the center. Let's say the player starts at 128,96. Screen size is 240x160. So, the map's X value would be... 128-(240/2), so it'd be at 8 (+8 for me; Pokemon style). Meaning, the map's upper-left corner would be drawn at -8,-16. Map's Y value being (96-(160/2)).
Jextwisdom 2 years ago
The biggest problem I am now facing is that since php variables can later javascript but javascript variables cannot alter php even with ajax requests I cannot seem to get the new maps to load when the user enters a door.
The ajax can tell they entered a door but without passing through php variables there is no way to tell the main script to change the map.
Basically it can pass through the visual ie: echo but not the variable ie: $changemap
IncludeAustin 2 years ago
I know there should be some replace method with the DOM to replace the divs background element but I cannot seem to get it to work. I tried echo the script that would change the background with an ajax request and an onload command for the DOM, but it didn't work for some reason.
IncludeAustin 2 years ago
I meant Zelda-like view sliding; the scrolling. ScrollBy doesn't sound very effective. I used a lot of math to make it work, yet it's fast enough. So basically, a lot of math. :P I also use the canvas element a lot, as opposed to div's with huge sizes. Might wanna look it up.
Jextwisdom 2 years ago
Wait how does the canvas element fit into all this? I looked into it but cannot find any connection.
Thanks in advance. You're a huge help.
IncludeAustin 2 years ago
The canvas element is a way to draw directly to that element. You can take images from the server, even take parts from that image, and draw them as you like. So instead of having a 1024x2048 sized div, you'd have a 240x160 canvas element. Drawing is faster then moving a div around. The only downside is text, but you could use small divs for that. Personally I'm using a sprite font.
Jextwisdom 2 years ago
Hmm I see so you are basically cropping them to the size of the map you want at certain x and y coordinates on the fly? I definitely see how that would be useful. I will have to study up on it further.
I just had an idea text could be a div with a php dynamic image with text passed through it with a get command and displayed as the divs background that would make it much neater =]
IncludeAustin 2 years ago
scrollBy is actually very effective & fast in firefox and chrome, because it doesn't require a DOM reflow.
RavensxShadow 2 years ago
Yea I'll look into that later right now I'm trying to get the array to change when they enter a new map.
IncludeAustin 2 years ago
Sorry if this is a noob question, but to be honest I just started immersing myself in JavaScript yesterday.
Thanks.
IncludeAustin 2 years ago
Keep in mind that most browsers are only configured to use a maximum of 6 connections, and only 2 for any given host. This won't have much effect when you're testing on your localhost, because of the very low latency. However, it can be a real bottleneck for even relatively low latency connections over the internet.
Just something to keep in mind if you're planning on pursuing this.
RavensxShadow 2 years ago
You should move away from dynamically generating the fight images. It might work great on your localhost or LAN, but as soon as you put it on the internet, you will see your framerate drop massively. The reason being that you need to not only make a connection to the server to see what the next frame should but, but also make ANOTHER connection to download the image for that frame. Even with a ping of 50ms, your game will crawl.
RavensxShadow 2 years ago
It is already online this was not on localhost =] and the fight is not from the server it uses the DOM to overlay a div over the hp and javascript to check what the new hp is the fighting is the most well done so far and will be shown on the next video.
IncludeAustin 2 years ago
My apologies. You said in the description that battling involved dynamic images, I thought you meant the actual fighting moves, not just the HP... ^^
That's basically how I do the health bar, except rather than overlaying a separate div over the healthbar, I just have 10 different images to reflect how much health. Obviously you can't get a very high resolution that way, but that was how the artist wanted it done so *shrug*... I figured I'd save a div.
RavensxShadow 2 years ago
The initial battle load uses a php dynamic image loaded as the background through a ajax request. The following attacks however do not send any server queries until the battle is over which then sends another ajax request.
IncludeAustin 2 years ago
Looks alright. But why does it say "loading" every time you move? It doesn't check for collisions using a database, does it?
Jextwisdom 2 years ago 2
I did in this video but I have now turned it into a php array. I have a few theories using microtime on how to make a keydown and keyup event to make it move continuously without having to keep pressing the buttons but it would require over 600 separate gifs and 2 queries which I think makes it a bad idea. I would love to get your take on how to make movement continuous. I only have knowledge in php this is my first time using any sort of javascript or ajax.
IncludeAustin 2 years ago
To make movement continuous, you will need to use a game state prediction algorithm. Instead of telling the server you want to move somewhere, then waiting for the server to tell you it's a legal move, you need to load the locations of all the static object on the client, as well as the dynamic objects (players monsters) and "guess" whether the place you want to move is legal or not. You will then move there. If it was a legal move, then great. If not, you'll "Rubber Band"
RavensxShadow 2 years ago