Indie-Resource.com

Posted: **Mon Oct 07, 2013 5:39 am**

The game is called Virtual Magic Kingdom by DIsney. It was opened for about 4 years before it closed in 2008. I'm trying to kickstart a (for now) solo project of mine to reconstruct this game from the ground up excluding the media using a different, more modern technology than flash and shockwave (originally developed on). Here's a video of a woman recreating it already in the same language upon which it was built http://www.youtube.com/watch?v=v-bpLnir9Js. The game uses mainly pictures for the "rooms", objects with special properties for items or "furniture", animations for moving pieces, and is also multiplayer with message, trade and minigame capabilities. But to my question. Since this game is obviously isometric and overly simplistic (for the most part), would isogenic be a good choice as an engine for this development? Do you expect me to hit any significant walls in my progress? I know this is a big task especially for somebody who barely knows JavaScript, but I'm willing to learn through this project.

I've already gotten an image to load into one scene and created a tilemap over the image. I'm just trying to figure out now how to apply the green circular image upon mouse hover over each tile.

Thanks.

Posted: **Mon Oct 07, 2013 5:54 pm**

Hi ya, yes this is a very good fit for Isogenic.

The green circle would be very easy to do. Just create an entity that is mounted to your tilemap and then hook the tilemap's on('mouseOver') event.

If you need more guidance let me know!

Posted: **Tue Oct 08, 2013 8:57 am**

Thank you very much. I look forward to posting more questions as I can guarantee I'll have plenty. I am stumped right now. I have really tried to get the hover over tile effect to work but just can't, so I am here.

This is my code so far:

client.js

Code: Select all

var Client = IgeClass.extend({
	classId: 'Client',
	
	init: function () {
		//console.log('Initialize');
		
		ige.showStats(1);
		
		//ige.input.debug(true);
		
		var self = this;
		
		self.textures = {};
		self.textures.room = new IgeTexture('./assets/room.jpg');
		self.textures.test_reticle = new IgeTexture('./assets/walk_reticle_64.png');
		
		ige.on('texturesLoaded', function () {
			ige.createFrontBuffer(true);
			
			ige.start(function (success) {
				if (success) {
					// engine started
					
					// create the scene
					self.scene1 = new IgeScene2d()
						.id('scene1');
					
					// set view port, only 1 needed
					self.vp1 = new IgeViewport()
						.id('vp1')
						.autoSize(true)
						.scene(self.scene1)
						.mount(ige);
						
					// creating the room, main image
					self.room = new IgeEntity()
						.id('room1')
						.texture(self.textures.room)
						.width(800)
						.height(572)
						.mount(self.scene1);
					
					// lay out the tiles
					self.tileMap1 = new IgeTileMap2d()
						.id('tileMap1')
						.depth(1)
						.translateTo(0, -465, 0)
						.tileWidth(32)
						.tileHeight(32)
						.drawGrid(30)
						
						//.drawMouse(true)
						.drawBounds(false)
						
						.isometricMounts(true)
						
						.highlightOccupied(true)
						//.hoverColor('#53DE53')
						.mount(self.scene1)
						
						.mouseOver(function (x, y, event) {
							//console.log(this.id(), x, y, event.button)
							
							// create reticle entity
							self.reticle = new IgeEntity()
								.depth(2)
								.texture(self.textures.test_reticle)
								.width(64)
								.height(32)
								.mount(self.tileMap1)
								.occupyTile(x, y, 0, 0, self.reticle);
						})
						
						/*.mouseOut(function (x, y, event) {
							unOccupyTile(x, y);
						});*/
						
				} else {
					// engine failed to start
					console.log('Failed to start');
				}
			});
		}) ;
	}
});

Here's what it looks like

The little circle icon doesn't appear until I move my mouse onto the canvas, but it's stationary.

You can see I tried working on getting rid of the icon when the tile is no longer hovered-upon. I feel like I am close. Thank you

(also how do you remove the border lines between the tiles?)

Posted: **Tue Oct 08, 2013 9:30 am**

Couple of issues with your code...

You are creating your reticle entity inside the mouse over which is incorrect. You should create it outside of the event listener.

Also you are using occupyTile but that just marks a tile as occupied by an object, it doesnt move the object on screen.

Instead of occupyTile use translateToTile instead.

Sorry for quick short answer I am replying on my mobile phone as I am not at home at the moment.

Posted: **Tue Oct 08, 2013 11:25 am**

I see. I now have the reticle move with the mouse, but it seems to be off. It's like the reticle isn't following the grids' coordinates but an up and down layout, like a top down view.

So close

Code: Select all

var Client = IgeClass.extend({
   classId: 'Client',
   
   init: function () {
      //console.log('Initialize');
      
      ige.showStats(1);
      
      //ige.input.debug(true);
      
      var self = this;
      
      self.textures = {};
      self.textures.room = new IgeTexture('./assets/room.jpg');
      self.textures.test_reticle = new IgeTexture('./assets/walk_reticle_64.png');
      
      ige.on('texturesLoaded', function () {
         ige.createFrontBuffer(true);
         
         ige.start(function (success) {
            if (success) {
               // engine started
               
               // create the scene
               self.scene1 = new IgeScene2d()
                  .id('scene1');
               
               // set view port, only 1 needed
               self.vp1 = new IgeViewport()
                  .id('vp1')
                  .autoSize(true)
                  .scene(self.scene1)
                  .mount(ige);
                  
               // creating the room, main image
				self.room = new IgeEntity()
                  .id('room1')
                  .texture(self.textures.room)
                  .width(800)
                  .height(572)
                  .mount(self.scene1);
               
				self.reticle = new IgeEntity()
					.depth(2)
					.texture(self.textures.test_reticle)
					.width(64)
					.height(32);
			   
               // lay out the tiles
               self.tileMap1 = new IgeTileMap2d()
                  .id('tileMap1')
                  .depth(1)
                  .translateTo(0, -465, 0)
                  .tileWidth(32)
                  .tileHeight(32)
                  .drawGrid(30)
                  
                  //.drawMouse(true)
                  .drawBounds(false)
                  
                  .isometricMounts(true)
                  
                  .highlightOccupied(true)
                  //.hoverColor('#53DE53')
                  .mount(self.scene1)
                  
                  .mouseOver(function (x, y, event) {
                    //console.log(this.id(), x, y, event.button)
                     
					//console.log(self.tileMap1.mouseToTile())
					
                    self.reticle.mount(self.tileMap1)
					
					self.reticle.translateToTile(x, y)
					
					/*self.tileMap1.mouseToTile(function(x2, y2) {
						self.reticle.translateToTile(x2, y2);
					})*/
					//console.log(mousePos)
					 
					//self.reticle.translateToTile(x, y);
                    //.mount(self.tileMap1)
                    //.translateToTile(x, y);
                  })
				  
				  .mouseOverOff(function (x, y, event) {
					self.reticle.unMount(self.tileMap1)
				  })
					
                  
                  /*.mouseOut(function (x, y, event) {
                     unOccupyTile(x, y);
                  });*/
                  
            } else {
               // engine failed to start
               console.log('Failed to start');
            }
         });
      }) ;
   }
});

Posted: **Tue Oct 08, 2013 11:34 am**

Hey I believe if you set .isometric(true) on your reticle entity wheb you create it that should fix the problem.

Let me know if that helps!

Posted: **Tue Oct 08, 2013 11:54 am**

Yes! Figured that out right before you posted that. Haha

Works as planned now. Next step will be classifying tiles as walkable, empty (not usable), and "exit" (having the reticle change to different texture accordingly). That'll have to be tomorrow though. Need to get some sleep now.

Current code:

Code: Select all

var Client = IgeClass.extend({
   classId: 'Client',
   
   init: function () {
      //console.log('Initialize');
      
      ige.showStats(1);
      
      //ige.input.debug(true);
      
      var self = this;
      
      self.textures = {};
      self.textures.room = new IgeTexture('./assets/room.jpg');
      self.textures.test_reticle = new IgeTexture('./assets/walk_reticle_64.png');
      
      ige.on('texturesLoaded', function () {
         ige.createFrontBuffer(true);
         
         ige.start(function (success) {
            if (success) {
               // engine started
               
               // create the scene
               self.scene1 = new IgeScene2d()
                  .id('scene1');
               
               // set view port, only 1 needed
               self.vp1 = new IgeViewport()
                  .id('vp1')
                  .autoSize(true)
                  .scene(self.scene1)
                  .mount(ige);
                  
               // creating the room, main image
				self.room = new IgeEntity()
                  .id('room1')
                  .texture(self.textures.room)
                  .width(800)
                  .height(572)
                  .mount(self.scene1);
               
				self.reticle = new IgeEntity()
					.depth(2)
					.texture(self.textures.test_reticle)
					.width(64)
					.height(32);
			   
               // lay out the tiles
               self.tileMap1 = new IgeTileMap2d()
                  .id('tileMap1')
                  .depth(1)
                  .translateTo(0, -465, 0)
                  .tileWidth(32)
                  .tileHeight(32)
                  .drawGrid(30)
                  
                  //.drawMouse(true)
                  .drawBounds(false)
                  
                  .isometricMounts(true)
                  
                  .highlightOccupied(true)
                  .mount(self.scene1)
                  
                  .mouseOver(function (x, y, event) {
                    console.log(this.id(), x, y, event.button)
                    
                    self.reticle.mount(self.tileMap1)
					self.reticle.isometric(true)
					self.reticle.translateToTile(x - 1, y - 1.5)

                  })
				  
				  .mouseOverOff(function (x, y, event) {
					self.reticle.unMount(self.tileMap1)
				  })
                  
            } else {
               // engine failed to start
               console.log('Failed to start');
            }
         });
      }) ;
   }
});

Why I need to offset the x and y by a little bit, I don't know. One more thing for now: how would I remove the tile borders?

Edit:

Nevermind, figured that out.

Indie-Resource.com

Using this engine, would it be possible to remake this game?

Using this engine, would it be possible to remake this game?

Re: Using this engine, would it be possible to remake this g

Re: Using this engine, would it be possible to remake this g

Re: Using this engine, would it be possible to remake this g

Re: Using this engine, would it be possible to remake this g

Re: Using this engine, would it be possible to remake this g

Re: Using this engine, would it be possible to remake this g