How to Display an Image in a Window

Discussion in 'Learning Javascript' started by abreyer3, Nov 11, 2015.

  1. abreyer3

    abreyer3 Villager Member

    Messages:
    12
    Likes Received:
    1
    Location:
    U.S.A.
    First Language:
    English
    I've been searching, but I've had no luck in finding javascript code that would work. I want to display a png image in a window from the pictures folder, but any code I find either spits out an error or doesn't work at all. Would someone be able to write a code template I can use? Thanks for your time.
     
    #1
  2. Hudell

    Hudell Dog Lord Veteran

    Messages:
    3,296
    Likes Received:
    2,869
    Location:
    Brazil
    First Language:
    Portuguese
    Primarily Uses:
    RMMV
    Code:
      Window_Base.prototype.drawPicture = function(filename, x, y) {    var bitmap = ImageManager.loadPicture(filename);    this.contents.blt(bitmap, 0, 0, bitmap._canvas.width, bitmap._canvas.height, x, y);  };
     
    #2
  3. abreyer3

    abreyer3 Villager Member

    Messages:
    12
    Likes Received:
    1
    Location:
    U.S.A.
    First Language:
    English
    Okay, thanks for the template. So for testing purposes, I put it so that the 'Loading.png' picture will display in the gold window, but it is still not displaying the image. I call the function when the gold window is called. What am I doing wrong? I get no errors, and the debug console isn't saying anything. I also don't have any plugins enabled. Sorry if this is a really simple solution I can't see, I'm trying to learn Javascript.

    Screenshots are of the code in question and how it appears in the game:

    Screenshot_1.png

    Screenshot_2.png
     
    #3
  4. Hudell

    Hudell Dog Lord Veteran

    Messages:
    3,296
    Likes Received:
    2,869
    Location:
    Brazil
    First Language:
    Portuguese
    Primarily Uses:
    RMMV
    You're drawing the picture on the initialize method, this means the picture will be drawn once and never again. Then you immediatelly call the refresh method, that erases everything that is drawn to draw again.


    You need your drawPicture to be called from inside that refresh method (after the line that says this.contents.clear ).
     
    #4
    abreyer3 likes this.
  5. abreyer3

    abreyer3 Villager Member

    Messages:
    12
    Likes Received:
    1
    Location:
    U.S.A.
    First Language:
    English
    Thank you! Thank you! It works! I knew it was some easy solution I overlooked, but now I understand. Thanks again! :D
     
    #5
  6. ArkDG

    ArkDG Veteran Veteran

    Messages:
    143
    Likes Received:
    45
    First Language:
    portuguese
    How do I resize the picture?

    I have a picture that is too big, but I want to reduce its size to put in the window without having to modify the original file. :/
     
    #6
  7. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    855
    First Language:
    German
    Bitmap.blt() has 2 optional parameters:

    this.contents.blt(bitmap, 0, 0, bitmap.width, bitmap.height, x, y, (dw), (dh));"dw" and "dh" signalize how big the drawn image should be and default to the default values (in this case bitmap.width and bitmap.height).
     
    #7
    ArkDG likes this.
  8. ValiLey

    ValiLey Warper Member

    Messages:
    4
    Likes Received:
    0
    First Language:
    German
    Primarily Uses:
    RMMV
    Hi there,

    I'm also trying to display an image in a window and I used Hudell's DrawImage function, but even though I don't get an error, no image is drawn.
    The function call is inside the refresh method and the image is in the picture folder.
    I've checked this over and over again, but I can't find any reason, why the image would not be drawn - maybe I'm turning blind...

    Would someone please double-check the code for me?

    window.PNG
     
    #8
  9. neition

    neition Warper Member

    Messages:
    2
    Likes Received:
    0
    First Language:
    korean
    when... anyone have problem like me.
    if you display sprite(picture ,face, svenemise any one) under window.
    let's do like that.

    var bitmap = new Sprite(ImageManager.loadPicture(temp_file_name));
    this.addChildToBack(bitmap);//it very important. it same add child, but your sprite display under window simply
    bitmap.setFrame(0,0,this.width,this.height);
     
    #9
  10. dbchest

    dbchest Beast Master Veteran

    Messages:
    434
    Likes Received:
    297
    Location:
    Pennsylvania
    First Language:
    English
    Primarily Uses:
    RMMV
    why use bitmap._canvas.width and bitmap._canvas.height? try bitmap.width and bitmap.height.
     
    #10

Share This Page