Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Thanked 0 Times in 0 Posts

    ctx.drawImage topdown rpg help ;)

    hey guys I am new here. I just started teaching myself javascript a bit over a month ago. I made a tic tac toe game and now I am working on a top down RPG based on a short story I wrote. My education is in literature so programming is a new to me -- its just a hobby I picked up.

    Anyways, here is my problem. I have a sprite controlled with WASD in a room with walls that cannot be bypassed. At the end of the first room (to the room's right) there is a "door," and when the sprite touches this "door," the background image of the room changes and the sprite appears on the left side of the room. This is the illusion of changing rooms.

    Originally I did this by switching the SRC of the original image, but this has lead to problems when I tried drawing images in room 2 that are different than the ones in room 1.

    this code is for switching rooms:

    if (
    			hero.x <= (door.x + 22)
    			&& door.x <= (hero.x + 32)
    			&& hero.y <= (door.y + 32)
    			&& door.y <= (hero.y + 32)
    			&& (68 in keysDown)
    			&& (level == 1)
    			) {
    when hero touches door while moving right, the level switches.
    after level++, the room is now room 2:

     if (level ==2){
         var render = function () {
    ctx.drawImage(kitchenImage, 0, 0);
     ctx.drawImage(sinkImage, 200, 200);

    Since the sink is drawn above the kitchen because it is rendered after the kitchen, I would expect the kitchen(a background image that fills up the canvas) to be drawn above the background image present in room 1; however, it does not.

    I will also point out that I have tested to see if the images are drawn when room == 2 and they are drawn. I have also tested to see if the room is changed to room 2 and it is. Also, note that reset1(); simply changes the position of the sprite to the left.

    Is there a way to somehow prioritize this image over the other image? I have read you cannot undraw images..is the only solution to make the former image transparent? These solutions seem rather silly any help is appreciated

  • #2
    New Coder
    Join Date
    May 2005
    New Zealand
    Thanked 6 Times in 6 Posts

    Doing a basic
    ctx.drawImage(imgOne, 0, 0);
    ctx.drawImage(imgTwo, 50, 50);
    the second image draws over the top of the first as expected.

    The one thing I don't quite understand about you code is the if (kitchenReady) and if (sinkReady) parts - where and how are these variables set?

    If they are set by some image loading function then perhaps the sinkReady is not actually ready (i.e. the sink image not loaded) at the time of the level change? Perhaps you need to do
    if ((kitchenReady) && (sinkReady)) {
       ctx.drawImage(kitchenImage, 0, 0);
       ctx.drawImage(sinkImage, 200, 200);
    Also i'm not sure why you are assigning a render var with the function to draw the level 2 images - why can't you just draw the images directly inside the if (level == 2)?



    Posting Permissions

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