Need help starting on a browser-based game

General PHP Help
#21

Alright so I’ve started making the template for the map in Dreamweaver. You can see it here:

Each square on the map will display one tile of the 1000x1000 map. The black sidebars on the sides of the map are the navigation bars which will display the X and Y coordinates of the 9 by 9 grid that the user is currently viewing. In the end, users will be able to navigate by clicking on one of the tiles, the map will then reload centered on that tile.

So I have the images I need to fill in the graphics. What I need help with now is how to accomplish the map scrolling and dynamicly load the images on the map through PHP. I think this might be too big a task to ask for you guys to accomplish through the forums, so all I’m asking for is some direction and some basic idea about how this should be done. Any tutorials or other links that you guys think might help would be wonderful. I think this is where your experience with graphics might come handy Ernie :smiley:

Thanks in advance and let me know if you guys need any clarification.

#22

Sure, but, I am gone most of tonight and leaving in a minute… Here are a few thoughts…

First, PHP is SERVER-SIDE only!!! Remember that ! !!! YES !!! Heee! It is very important for gaming…

So, it can load items from the database and load pictures from a folder and put them into a a field on an HTML form that is sent to the browser. It is NOT a dynamically loaded programming tool. Not like VB or VB.NET.
Think of any web page, you see an image. How is it stored there? Either in HTML with tags or thru the use of CSS. So, that can be a problem for a game. There are a few interested ways to fix this. You can use a hidden iFrame and load PHP pages into it using Javascript. This allows you the use of PHP, but, does not “blink” the entire page when things are changed on the page. Let’s explain it this way… Normally PHP is called, it creates “add-ons” to the HTML and the post the new page to the browser. Like a login page switches you to your real page. So, the browser screen blinks as EVERTHING gets refreshed. I hate that look!

So, ways around it, you could use HTML5, but, a lot of browsers do not support that. You could use the hidden PHP pages in iFrames which does work well. You can load all of the images into the hidden page as HTML IMG fields and use Javascript to move the pictures to the screen. Should work nicely. The issue is size of images. If they are large, you would have to have the PHP in the hidden page create one large picture to move. So, even though it looks like 100 pictures, it is just one big one. This really depends on how much of the map grid gets changed at one time. If it is “scrolling” as you said, that is just moving the picture one cell down or left or whatever. That is only redrawing the 10 new squares on the top or right whatever.

So, fill me in on how the display is going to be altered during play. If you just want to redrawn the entire screen each time, that is easy. Put the grid into an iFrame and just use Javascript to reload it. The new page is loaded and all it displays is the map. I think that might be the way to go. Since you want this to be a PHP game, that would be fairly easy.

I have sample code I did for someone else who needed to do this. I will dig it up when I get home. What is REALLY nice about this way is that you only see the map change, the headings, footings and such stay where they are and do not move since you are not changing them! Makes it look smooth. The sample code I will post late tonight should show you how to do that. Later…

Oh, about images… Do not store them in your database, too slow! Especially if a lot of people are playing. Just let the PHP handle them from a folder…

#23

Thanks I will look those up and learn what I can :slight_smile:

#24

Oh and yes I think I would like to go with the smooth version where only the map changes. But I am a beginner at this so the easiest method might be best for now and I can switch/upgrade later some other time. But I’m looking forward to seeing the code, thanks again for the help.

#25

Well, after a lot of thought about the best way for you to do this and the fact that you mentioned several times that you are a beginner, I am thinking it might be easiest to use an iFrame. We can change it later on if it doesn’t work for you.

So, what is an iFrame? It is just a webpage inside a webpage. It is a simple tag It can be visible, hidden whatever is needed. What is really nice about frames is that with a little Javascript, just a couple lines actually, you can reload it with new data. This should work very very well for your type of mapping.

Basically, create your entire page however you normally would and do not worry about the map. Where the map is, you would place the frame. This frame would be loaded using a PHP page. So, the entire output of the PHP page would be placed into the frame. Then, using JS, you can tell the frame to reload or refresh using the PHP page. In the PHP page you would accept “arguments”. Something in this manor:

drawmap.php?x=1&y=1 So, this PHP file “drawmap” would product the map at coords 1,1 in the upper left.

In the drawmap.php, you would grab the coords x and y with $_GET[‘x’], etc. So, the drawmap.php code would know where to start the map at and it would create, let’s say a table that would be filled with cells of the map starting in the upper left with, in this sample, 1,1… Should be very simple to do!

So, ask you questions and I will send some sample code how to do all this. (It’s not really hard to handle!)

More a bit later…

#26

Alright so I’ve made some progress on the in-game part of the website. I’ve been playing around with some php code to generate the map but I’m stuck on a tiny error which I can’t seem to figure out. For some reason the map is generated with small vertical spaces between the individual rows when there should be no vertical spaces at al. There is no horizontal spaces between the map blocks so at least that’s working well. I checked my CSS over and over again but there is no reason why these vertical spaces should appear. I’m generating the map with the following code:

<?php for ($x=1; $x<=81; $x++) { echo 'Block'; } ?>
#27

Sry I messed up my last post, for some reason I can’t edit it so here it is again:

Alright so I’ve made some progress on the in-game part of the website. I’ve been playing around with some php code to generate the map but I’m stuck on a tiny error which I can’t seem to figure out. For some reason the map is generated with small vertical spaces between the individual rows when there should be no vertical spaces at all. Here’s a picture:

There is no horizontal spaces between the map blocks so at least that’s working well. I checked my CSS over and over again but there is no reason why these vertical spaces should appear. I’m generating the map with the following code:

[php]


<?php
for ($x=1; $x<=81; $x++) {
echo ‘Block’;
}
?>
[/php]

Anyone have any idea about why this would create the vertical spaces between the rows of the map? Any idea how to fix it?

#28

I will be around most of tonight to help. Will be back around 7 PM EST. So, I should be able to help you a lot then to fix that problem. So, if you are around send any other questions and I will help when I get home.

#29

I would like to help as much as I can too. If possible I would like to join your dev team ^.^

#30

Gears: Just jump in, read all of the posts for this topic from the beginning to catch up on what we are discussing. Then, look at all the links that “ShieldHeart” posted and you will see his/her progress. In that
way, you will be up to speed with us. Basically on any site like this one, you can jump in and add your
voice to the project. If you see something you like or want to add, just tell us. Any ideas are always a
nice help. The owner of the project may want a developer to help and you can discuss that with him in
a private message by clicking on his user-name… Hope that explains it all…

Now, ShieldHeart, you are using CSS to display the DIV’s, but, the PNG that you are displaying is really
a HTML command. So, you can just add a width and height to the tag to set the size of the PNG.
Depending on the rest of your CSS code, it should work. If the CSS has other code changing the size of
the DIV to fit a grid, then, that would be where you would change the width and height of the square.
Hope that helps. Good luck…

PS: The site is getting there! Looks nicer each time I see it! SMILES!

#31

I appreciate your interest in this projects Gears, I would love to have a paid team to develop and maintain this site. Unfortunately I’m still a student, barely have enough money for my self haha. I’m mostly doing this as a hobby, maybe one day if the site gets enough traffic and generates actual income I may hire some people to manage the site, but that’s a long time from now. Though your thoughts and suggestions on the project are always welcome :slight_smile:

As for my previous problem Ernie, my png files are 50x50 pixels, and I checked my CSS multiple times, so I’m not sure why it’s creating vertical spaces between the rows. I’m actually considering changing the way I draw the map, I’ve been looking into PHP’s graphics functions from this site:

So I’m trying to look for other possible ways of doing this. Let me know if there are other good sites you know of that might help me learn about PHP’s graphics options.

Right now I’m experimenting with ways on drawing the world map. I think PHP’s graphics functions will come in handy for this. The world map will show the entire 1000x1000 map in a very compressed form. 1 tile will be the equivalent of 1 pixel on the screen. So my new task is to draw this map on a 1000x1000 pixel grid in the most efficient way possible. My biggest worry is that I use up so much resources and the map takes forever to load. Though I’ve seen similar games generate much bigger maps at lightning speeds, so I guess there is a perfectly efficient way of doing this. Let me know if you guys have any ideas about how this should be done. And as always, thanks in advance.

#32

Well, maybe I wasn’t clear. You are using a HTML 'IMG" tag to display. Just add width and height into it and adjust as needed. The actual size of your PNG’s do not matter if you are using HTML. You can set the size there and the image will be resized to fit it. Then, you can see what your background looks like. Try something like this just for testing:

[php]
echo ‘Block’;
[/php]
(You can raise the amount to 51 or 52 to fill in the gaps.)

The problem is that this is is 81 squares, with no rows and cols going by your display you posted.
Therefore, there must be a setting where you set the the width and height of the DIV. this is most likely
your error area. You set it 10x9 instead of 9x9 or whatever. And, the CSS and display IMG’s are trying
to center all the cells. So, there are a lot of possible areas for errors.
So, post the CSS code and the display area of the code if the above does not work so we can review it.

Good luck!

#33

I tried your code and fiddled around with the height and width settings as well but still no luck. If it helps the DIV with the class of “map” which holds the images is 450x450 pixels, which should fit the 9x9 of 50x50 pixel images in perfectly. Here is the CSS of the DIV:

[php]#content {
float: right;
width: 550px;
padding-right: 50px;
}

.map {
height: 450px;
width: 450px;
margin-top: 50px;
margin-left: 50px;
position: absolute;
text-align: left;
}[/php]

and again the PHP code that generates the map:

[php]

<?php for ($x=1; $x<=81; $x++) { echo 'Block'; } ?>
[/php]

Let me know if you see anything that might be causing a problem. The only solution I can think of is creating a different DIV for each row of map and making sure there is no space or padding between those DIVs.

#34
I appreciate your interest in this projects Gears, I would love to have a paid team to develop and maintain this site.

I am willing to help free of charge, as I love working on php back-ended games.

also I can not remember where in the topic you said it but I could help you with the gen of the map, its a lot easier then you would think, well using mysql/sqlite it’s as easy as pie, and I can also show you how to make the gen of the make lightning fast.

I know quite a lot on how to use php (not all functions but human ingenuity comes into play ^.^ ) and if we can talk in a more instant fashion with accesses to the source and you tell me what needs to be done we can work together/ compare code and see how things end up.

I don’t have any work to be done this month as I can’t find any good php projects to work on so I got free time and my brains always aching to code.

#35

ShieldHeart,
I just wrote 3 paragraphs explaining things to test, then, I remembered something and researched it.
I found a note that said two things can cause the white-space between cells. First, if you set a size for
the DIV, CSS will attempt to fill it with the smallest area used if you use “float: left;” for the CSS. You
should remove the HTML width/height I had you try. CSS will over-ride that anyways. You are using
absolute positioning and they said to use floating, left positioning.
Another note said to use “white-space: nowrap;” for the CSS. One other issue is parent/child CSS
issues. If you declare something above the current version and do not over-ride it, that might be
telling the CSS to put in spacing or padding. So, if the parent DIV has padding of 5px, and you do not
set current padding to 0px, then it would add the 5px in. So, I think, try these two and let us know.
Ernie

#36

Fixed! :smiley: Looks much better:

Turns out it was the font-size style. Who knows why that was affecting it but setting the font-size to 0px in my map class solved the problem. Thanks again Ernie.

Oh and Gears, I’ll send you a private message later tonight, I would definitely appreciate the help. I’ve been wondering what the most efficient way of generating the maps would be for a while now, if you could show me a few tricks about that it would be great!

#37

Great! Glad to hear it… It’s always something simple! As always this post will stay open…

Oh, your map page looks great!

#38
Oh and Gears, I'll send you a private message later tonight, I would definitely appreciate the help. I've been wondering what the most efficient way of generating the maps would be for a while now, if you could show me a few tricks about that it would be great!

oky dokie, if you got YIM or MSN I would love to chat and help u then, it’s easier when u can try something then ask them right away if it works/ is what they were thinking.

skype would be a + as then you could see my screen and make working even faster.

#39

Actually, I was planning on putting Skype on this system soon. I have another person on this site that needs that type of help. When I do, I will let you know. I am just too busy today… perhaps tomorrow!

#40

Yet you can reply to this board pretty quickly, hmmmm… :smiley:

Sponsor our Newsletter | Privacy Policy | Terms of Service