Texture maps and tiles - Getting started.

Post your help queries and engine programming questions here

Texture maps and tiles - Getting started.

Postby Hedge » Thu Jun 19, 2014 3:46 pm

Hey,

I've started tinkering with the framework and I'm just getting accustomed to the API. I can code but I'm not familiar with game engines.

All I'm trying to do is tile a 4x4 grid using 1 isometric tile I have drawn myself.

I have my scene, viewport and texture map. However, when the tile is painted the texture has been shrunk down so it looks odd. I saw in one of the tutorial videos the dimensionsFromTexture() method was used but I'm not sure if this is applicable in my case and if it is, when would I use it?

Here is a screenshot of what I'm seeing...

Image


Some test code...

Code: Select all
// Load a game texture here
      gameTextures.myTexture = new IgeCellSheet('./assets/tile_grass_p1_2.png', 1, 1);
      
      // Wait for our textures to load before continuing
      ige.on('texturesLoaded', function () {
         // Create the HTML canvas
         ige.createFrontBuffer(true);
         //gameTextures.myTexture.resize(100,50);

         // Start the engine
         ige.start(function (success) {
            // Check if the engine started successfully
            if (success) {
               
               // Create the scene - position is 0
               self.scene1 = new IgeScene2d()
                  .id('scene')
                  .translateTo(0, 0, 0)
                  .drawBounds(false)

               // Create the main viewport
               self.vp1 = new IgeViewport()
                  .id('vp1')
                  .autoSize(true)
                  .scene(self.scene1)
                  .drawBounds(true)
                  .mount(ige)

               self.textureMap1 = new IgeTextureMap()
                  .depth(1)
                  .translateTo(0, 0, 0)
                  .drawGrid(4)
                  .drawBounds(true)
                  .isometricMounts(true)
                  .autoSection(10)
                  .mount(self.scene1)

               

               texIndex = self.textureMap1.addTexture(gameTextures.myTexture)
               

               // Paint isometric texture map
               self.textureMap1.paintTile(0, 0, texIndex, 1);

               // Output the map data to the console - this is how you can "save"
               // map data from an existing in-memory map
               console.log(self.textureMap1.map.mapDataString());

            }
         });


Thanks for the help.
Hedge
 
Posts: 2
Joined: Thu Jun 19, 2014 3:34 pm

Re: Texture maps and tiles - Getting started.

Postby Hedge » Wed Jun 25, 2014 3:03 pm

It seems I had drawn my isometric tile incorrectly. This caused it to look 'squashed'.
Hedge
 
Posts: 2
Joined: Thu Jun 19, 2014 3:34 pm

Re: Texture maps and tiles - Getting started.

Postby robaldred » Fri Jun 27, 2014 10:56 am

Is your tile asset the correct dimensions for the texturemap?

You should be specific your tile size when defining an IgeTextureMap

In the following example I'm assuming you're using the assets in the examples ie. grassSheet
that has tiles which are 100x50
So you can define the texture map as follows:
Code: Select all
self.textureMap1
    .tileWidth(40)
    .tileHeight(40)


The grassSheet will be resized automatically so that
Code: Select all
width = tileWidth * 2
height = tileHeight


Checkout example 13.2-texturemaps
It includes examples of both 2d and isometric texturemaps.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron