Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 3 of 5 FirstFirst 12345 LastLast
Results 31 to 45 of 71

Thread: Canvas Problem

  1. #31
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Old Pedant View Post
    Because you coded something wrong?

    How can we guess without seeing your code?
    look at my first post, I am the starter of the thread.

  2. #32
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Not sure why you reset your x coord, tilePos = -50 when you draw the next line?
    Thats off the canvas

    Easier - just have the x coordinate as x*25
    or even 40+x*25 (say if you want a 40 pixel margin)

    similarly your tileTop (y) coordinate could just be y*25

    it will save you doing all the tilePos counting which is where the error is anyway.

    Also you reset your image and reload your picture source every turn of the loop. That would be better done before the for loops start!

    See 3 posts Below for my re-write!
    Last edited by donna1; 12-05-2012 at 02:06 AM.

  3. #33
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Quote Originally Posted by donna1 View Post
    ... a statement like A=B=C=7
    doesnt make any sense anyway ...
    First of all, it *does* make sense.

    In JavaScript, you would write it as
    Code:
        A = B == C == 7;
    And it means
    Code:
       A = ( ( B == C ) == 7 )
    which means that A will always end up being false, because you are comparing a boolean (true/false result of comparing B and C) to an integer. But that doesn't mean the construction is useless. I purposely created a pathological case.

    *******************
    in my language you couldnt have a statement like A=B=C=7
    When you get a few years experience, if you really want to create a braindead language that doesn't allow that, you can. Just don't expect anybody to then use it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  4. #34
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Quote Originally Posted by pdiddles03 View Post
    look at my first post, I am the starter of the thread.
    LOL! Sorry! Mea maxima culpa! I thought I was answering donna1.

    Let me go look again.

    Though I'm not best person to ask about canvas.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  5. #35
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Ive already rewritten it in perfect javascript lol
    Code:
    var grass=new Image();
    var cement=new Image();
    grass.src="new/grass.png";
    cement.src="new/cement.jpg";
    
    for(x=0; x < map.length; x++){
     for(y=0; y < map[x].length; y++){
    
        if(parseInt(map[x][y])==1){
    	context.drawImage(grass,x*25,y*25);}
        else{
            context.drawImage(cement,x*25,y*25);}
    
     }
    }
    Last edited by donna1; 12-05-2012 at 02:11 AM.

  6. #36
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    There are several things in your code that don't make sense.

    For instance, you *SEEM* to specify that the size of a "grass" image is 50x50 pixels. You *SEEM* to do that here:
    Code:
    #grass{
    	height: 50px;
    	width: 50px;
    	background: url(new/grass.png):
    	position: relative;
    	float: left;
    }
    But that's all wrong, because you are using #grass so that style will *ONLY* affect an element which has id="grass". If it was meant to affect MANY elements, it should have been specified as .grass and then the elements would use class="grass".

    In any case, when you increment the positions where you draw the images, you only increase by 25 pixels to the right and down.

    The increases *MUST* match the sizes of the images you are dropping in there.

    When you reset the tilePos you do
    Code:
        tilePos=-50l
    yet in the initialization code you did
    Code:
    var tilePos=-25;
    But both of them needlessly complicate matters.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  7. #37
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Quote Originally Posted by donna1 View Post
    Ive already rewritten it in perfect javascript lol
    Code:
    var grass=new Image();
    var cement=new Image();
    grass.src="new/grass.png";
    cement.src="new/cement.jpg";
    
    for(x=0; x < map.length; x++){
     for(y=0; y < map[x].length; y++){
    
        if(parseInt(map[x][y])==1){
    	context.drawImage(grass,x*25,y*25);}
        else{
            context.drawImage(cement,x*25,y*25);}
    
     }
    }
    That's very close to what I was going to do.

    A little more efficient:
    Code:
    var grass=new Image();
    var cement=new Image();
    grass.src="new/grass.png";
    cement.src="new/cement.jpg";
    
    for(x=0; x < map.length; x++)
    {
        var line = map[x];
        for(y=0; y < line.length; y++)
        {
    	context.drawImage( line[y] == "1" ? grass : cement  x*25, y*25);
        }
    }
    No reason to parseInt() the "1"/"0" value. Just compare the cell contents to a string instead of a number!

    In x*25 and y*25: naturally, the 25's there need to match the actual height (x) and width (y) of the image.

    Which suggests that for clarity we should swap the usage of x and y.
    Last edited by Old Pedant; 12-05-2012 at 02:40 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  8. #38
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    What the heck...
    Code:
    var cellWidth = 25;
    var cellHeight = 25;
    
    var grass=new Image();
    var cement=new Image();
    grass.src="new/grass.png";
    grass.width = cellWidth; grass.height = cellHeight;
    cement.src="new/cement.jpg";
    cement.width = cellWidth; cement.height = cellHeight;
    
    for( row=0; row < map.length; ++row)
    {
        var line = map[row];
        for( column=0; column < line.length; ++column )
        {
    	context.drawImage( line[column] == "1" ? grass : cement,
                               column*cellWidth, 
                               row*cellHeight 
            );
        }
    }
    That's actually getting readable.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  9. #39
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Thanks for your help! I'll study both your solutions when I have a lil more time.

  10. #40
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    The beauty of this solution is that you could expand it to many types of "terrain".

    Example:
    Code:
    var terrain {
       "g" : "grass.png",
       "c" : "cementjpg",
       "m" : "mountain.gif",
       "w" : "water.jpg",
       "t" : "town.png"
    };
    
    var map = [
        "mmmmmwwwww",
        "mmggcctttw",
        .... etc. ...
    ];
    
    var cellWidth = 25;
    var cellHeight = 25;
    
    // replace strings with image objects:
    for ( var c in terrain )
    {
         var pic = new Image();
         pic.src = "new/" + terrain[c];
         pic.width = cellWidth; 
         pic.height = cellHeight;
         terrain[c] = pic; 
    }
    // draw terrain:
    for( row=0; row < map.length; ++row)
    {
        var line = map[row];
        for( column=0; column < line.length; ++column )
        {
            var image = terrain[ line[ column ] ];
    	context.drawImage( image, column*cellWidth,  row*cellHeight );
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  11. #41
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    So now I have another question, not to do with the programming side but canvas again. How efficient is it for a browser to render a game in canvas seeing every time you make a change, you have to clearthe canvas and then redo everything by calling the same functions. Wouldn't just having the DIV tags an programming their styles through CSS and Javascript be a lot simpler and make the browser faster?

    I noticed by right clicking that basically your browser renders everything you did in javascript just a whole image.

  12. #42
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Well sure. Esp. if you are creating the game background via some server-side code (PHP/JSP/ASP/etc.) it would make more sense to just generate a bunch of <img> tags inside a <div>. Done correctly, the images would automatically show 10 per row.

    The only reason I could see to use canvas like this (and even then I'm not sure it's a better choice then <img>s in a <div>) would be because you are downloading new maps via, say, AJAX and/or you are generating the maps using logic (semi-random??) in JS code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  13. #43
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    Oh...and you don't *HAVE* to clear the canvas and start over for *ANY* change.

    Say you wanted to change one cell from grass to concrete: You could do that by just re-writing that part of the canvas.

    Or, if you didn't use a canvas, by just changing the src property of one of your <img> tags.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  14. #44
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    So ok, let's say I have my map all written out and generated.

    Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?

  15. #45
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    You could use another, smaller canvas on top of the other, so you'd only have to manipulate that canvas (clear, redraw, move).


 
Page 3 of 5 FirstFirst 12345 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •