Fill canvas with a background image

45 views
Skip to first unread message

CPlayMas H

unread,
Jun 20, 2015, 12:45:29 PM6/20/15
to turbulenz-e...@googlegroups.com
How can I put an image as background?

What I have tried is to create a Draw2DSprite with my texture storing the image I want for the background, and then using the draw2D.drawSprite(sprite) method.
The problem is that the image doesn´t fill the entire game window.

Also, I want to know if there is a way to put that background without calling the draw2D.drawSprite(sprite) method in each frame.

This is the result I get so far:


And this is my code:

    var backgroundSprite;
    var backgroundTexture = graphicsDevice.createTexture({
      src: "img/BackGround2.jpg",
      mipmaps: true,
      dynamic: false,
      x: 500,
      y: 500  ,
      onload: function(texture) {
        if (texture) {
          backgroundSprite = Draw2DSprite.create({
            texture: texture,
          });
        }
      }
    });

function tick() 
  {
    if (graphicsDevice.beginFrame())
    {

      draw2D.begin();
      if (backgroundSprite)
        draw2D.drawSprite(backgroundSprite);
      draw2D.end();

      //graphicsDevice.clear([1.0, 1.0, 1.0, 1.0], 1.0, 0.0);
      graphicsDevice.endFrame();
    }
  }





Thanks in advance for your answers !!!

Ian Ballantyne

unread,
Jul 9, 2015, 4:39:09 AM7/9/15
to turbulenz-e...@googlegroups.com
First thing, with draw2D the texture ideally needs to be power-of-2 with the default shader e.g. 512x512 or 512x256 etc then draw the 500x500 using the textureRectangle. It can be configured to use non-power-of-two textures with the npot2D.cgfx shader. See customBlendModes in the create function for: http://docs.turbulenz.com/jslibrary_api/draw2d_api.html#the-draw2d-object and the "leaderboards" sample in the SDK.

CPlayMas H

unread,
Jul 10, 2015, 5:33:50 PM7/10/15
to turbulenz-e...@googlegroups.com
Thank you very much, I have done this part successfully.
Reply all
Reply to author
Forward
0 new messages