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.
Using this engine, would it be possible to remake this game?
-
- Posts: 9
- Joined: Mon Oct 07, 2013 4:55 am
- coolbloke1324
- Posts: 181
- Joined: Mon Jan 23, 2012 5:20 pm
Re: Using this engine, would it be possible to remake this g
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!
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!
-
- Posts: 9
- Joined: Mon Oct 07, 2013 4:55 am
Re: Using this engine, would it be possible to remake this g
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
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?)
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');
}
});
}) ;
}
});
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?)
- coolbloke1324
- Posts: 181
- Joined: Mon Jan 23, 2012 5:20 pm
Re: Using this engine, would it be possible to remake this g
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.
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.
-
- Posts: 9
- Joined: Mon Oct 07, 2013 4:55 am
Re: Using this engine, would it be possible to remake this g
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
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');
}
});
}) ;
}
});
- coolbloke1324
- Posts: 181
- Joined: Mon Jan 23, 2012 5:20 pm
Re: Using this engine, would it be possible to remake this g
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!
Let me know if that helps!
-
- Posts: 9
- Joined: Mon Oct 07, 2013 4:55 am
Re: Using this engine, would it be possible to remake this g
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:
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.
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');
}
});
}) ;
}
});
Edit:
Nevermind, figured that out.