Turn Any Image Into A Tilemap?

0 favourites
  • 3 posts
From the Asset Store
Elevate your games with our AI Chatbot Integration! Seamlessly connect your Construct 3 projects with GPT-4 for dynamic,
  • Is there such a thing available for use in Construct 2 or 3? Not that I wouldn't mind using a bunch of sprites...

  • Do you mean you want to set the tilemap's tilesheet image from any other image? If you have the URL of that image (ie: if it's a project file, or a file hosted and accessible from elsewhere) you can use the 'Load image from URL' action on the Tilemap.

    Do you mean you want to be able to import an image at runtime and draw the tile with one pixel per tile? In which case you need to load the image into a sprite, draw the sprite at [0,0], then run a 2D loop that will check every cell in your array. For example:

    For "x" from 0 to ( Tilemap.Width / Tilemap.Tilewidth )
    For "y" from 0 to ( Tilemap.Width / Tilemap.Tilewidth )
    [/code:2rszhbpz]
    
    Gives you a loop which iterates over every cell in the tilemap. You'll need a way of indexing the tiles to pixel colours, but the pixel colour can be determined using this lovely line from @R0J0hound:
    
    [code:2rszhbpz]
    Browser.ExecJS("var canvas=document.getElementById('c2canvas');
    var ctx=canvas.getContext('2d');
    var pixel=ctx.getImageData("&loopindex( "x" )&","&loopindex( "y" )&",1,1);
    pixel.data[0];")[/code:2rszhbpz]
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Do you mean you want to set the tilemap's tilesheet image from any other image? If you have the URL of that image (ie: if it's a project file, or a file hosted and accessible from elsewhere) you can use the 'Load image from URL' action on the Tilemap.

    Do you mean you want to be able to import an image at runtime and draw the tile with one pixel per tile? In which case you need to load the image into a sprite, draw the sprite at [0,0], then run a 2D loop that will check every cell in your array. For example:

    > For "x" from 0 to ( Tilemap.Width / Tilemap.Tilewidth )
    For "y" from 0 to ( Tilemap.Width / Tilemap.Tilewidth )
    [/code:2sz1tazp]
    
    Gives you a loop which iterates over every cell in the tilemap. You'll need a way of indexing the tiles to pixel colours, but the pixel colour can be determined using this lovely line from @R0J0hound:
    
    [code:2sz1tazp]
    Browser.ExecJS("var canvas=document.getElementById('c2canvas');
    var ctx=canvas.getContext('2d');
    var pixel=ctx.getImageData("&loopindex( "x" )&","&loopindex( "y" )&",1,1);
    pixel.data[0];")[/code:2sz1tazp]
    

    Well, I really want to take any picture I may have or obtain, turn it into a tilemap (outside of Construct 2/3) and then import it into the program to use how I wish.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)