Forums » Help » Some newbie questions, part 2.

Hi,

I'm working on a Diablo like game. So far I managed to solve many things on my own, like shrines, health bars, health globes, gold drops, skills, projectiles, bosses, mob AI etc.

Here are my questions:

Question 1
Right now my interface looks like this: http://i.imgur.com/cZQZFMF.jpg

However, what I want is; when I press DOWN, it should go continue. When I press DOWN again, it should go credits. However, I couldn't understand how can I make a "<" icon to point where we are.

Right now it looks like this:

		this.font.interface.draw("1", 270, 293);
		this.font.interface.draw("2", 270, 355);
		this.font.interface.draw("3", 270, 411);

All I need to learn is how to make remove a font once they appear on init method. For example, when I press DOWN, "<" font has to be visible on "Continue", when I press DOWN again, "<" it has to be visible on "Credits".

Question 2

I need some music methods like:

    ig.music.playOnce(); //to play music only once
    ig.music.isPlaying(); //to keep track if there is a music playing
    ig.music.groupBy('townMusics'); //so I can play town musics when I am in town, play boss musics when I fight boss etc.

Can anyone give me ideas how to implement those?

Question 3

Right now, when I move on "gold" with my PlayerEntity, I can pickup the gold. However, when I shoot a projectile to it, "Gold" entity disappears. Also, when I shoot a projectile to warp gates, it teleports my PlayerEntity to next instance.

Do I have wrong collision attributes set or am I doing something wrong?

Source is here: http://paste.laravel.com/1gaS

Question 4

When I kill a boss entity, boss drops some gold entities on ground (throws drops randomly in 60/60 range). However, there is a possibility those entities may spawn on collision objects, so my player can't move to them to pickup.

How can I check if target X,Y is on a collision object?

Question 5

I need to clean up my main.js a bit. Right now it is like:

    gameOver = ig.Game.extend({
    gameStart = ig.Game.extend({
    game = ig.Game.extend({

I need my main.js just for general methods and loading purposes. How can I do this?

Ps. Think it like front controllers in backend languages such as PHP. My main.js should do something like.

     var gameStart = this.loader.load('gameOver.js'); //so I can put logic into gameOver.js

Question 6

As for inheritence, how can I make my projectiles inherit from main projectile object?

For example,

    projectileSmall (Entity)
    projectileBig (Entity)

right now these two entities are the skills my PlayerEntity is using, however both look exactly the same, except:

- They use different images and animations
- BigProjectile deals more damage
- BigProjectiles travels slower

Apart from that, all the boilerplate code is the same. (like init, check, collision etc.)

Can I do something like:

abstract EntityProjectileModel = ig.Entity.extend({
     //Boilerplate code!
     //Collision, check, init, things like that.
})

EntityBigProjectile = ig.EntityProjectileModel.extend({
      animSheet: ...,
      damage: 500,
      speed: 300
})

EntitySmallProjectile = ig.EntityProjectileModel.extend({
      animSheet: ...,
      damage: 200,
      speed: 600
})

Thank you.

continuing here...

Question 7

When I add an entity with Weltmeister, they reappear when I switch levels.

Is there any workaround for this apart from defining what objects should spawn on our game's init() method?

Question 8

How can I add an object where I store log messages? (Something like chat feature on MMORPG games.)

Question 9

How can I disable pressing and holding down input keys?

For example, if I hold down my SPACE key, I throw unlimited amounts of projectiles. I want to restrict it to first press only. So, no matter how long you keep SPACE pressed, it shouldn't spawn additional entities unless the SPACE key is released. (It should spawn entities as long as button is being spammed, but not while holding it down.)

continuing...

Question 10

Is what I'm trying to do seems overkill? I plan on developing an ARPG games with the following features from Path of Exile/Diablo.

- Online save feature (I can do this easily since I'm a sr backend dev)

- Pickupable items (gold, health globes, explosives)

- Interactable entities like "shrines". They will give bonus like:
%x to movement speed
Fires double projectiles
Increased projectile damage
Increased projectile speed
Projectiles will spawn X smaller projectiles upon collision
Increased gold/xp gain
Invisibility

- Different skills
Fireball (deals X damage, kills itself upon collision)
Laser (deals X damage, doesn't kill itself upon collision)
Poison (deals X damage, X more damage over 5 seconds)
AOE skills

- Player's base stats (str, dex, vit, armor etc.)

- Equipments with item bonusses. For example:
Sword of Blahblah (30-50 dps, 75% accurracy, equip bonus: "skills no longer consume mana")
Boots of Blahblah (30 armor, equip bonus: "Gain permanent 30% movement speed" equip bonus: "Unable to benefit from shrine effects."

- RPG elements (shops, quests, inventory etc.)

- 2 or 3 act (50 levels on a single act)

- 2 or 3 difficulty (diablo logic, you finish game, you start game on an increased difficulty)

I know it will be extremely hard but once I develop the underneath they will be easy to build upon. What I wonder is if ImpactJS is capable of handling it. I don't want to do everything I can do for maximal performance gain but suffer from 10 fps on a highend computer.

Why not pick-up one of the Impact starter books? I can't vouch for the packtPub one (Never read it), but the Jesse Freeman book is solid. They will answer a lot of questions for you early on:
http://www.amazon.com/gp/product/1449315178
http://www.packtpub.com/html5-game-development-with-impactjs/book

Now to try and address some of your questions:

However, what I want is; when I press DOWN, it should go continue. When I press DOWN again, it should go credits. However, I couldn't understand how can I make a "<" icon to point where we are.

Basically, you want to do this: http://labs.tderen.com/javascript/visualEquipment/, correct? Basically what you do is track two indexes, one index is the length of an Array containing all selectable items: dataStream: ["Option 1", "Option 2", "Option 3"] = Index of 2. (0, 1, 2)

The second index is an integer value that stores the index you are currently pointing to: selectedIndex: 0

In your update function, when you press the UP or DOWN keys, simply check to make sure you don't go out of bounds in your selectedIndex and then update your selectedIndex.

                if(ig.input.pressed('down')){
                    this.selectedIndex++;
                    if(this.selectedIndex >= this.dataStream.control.length)
                        this.selectedIndex = 0;
                }

                if(ig.input.pressed('up')){
                    this.selectedIndex--;
                    if(this.selectedIndex < 0)
                        this.selectedIndex = this.dataStream.control.length-1;
                }

Your draw function will then look something like this: !NOTE!: I'm using Canvas Fonts, not built-in Impact fonts, the logic remains the same but the syntax might differ slightly:

                // Draw the text that control the Visual Equipment GUI stuff
                for (var i = 0; i < this.dataStream.control.length; i++) {
// OptionIndex stores the LEFT / RIGHT item selection
                    var optionIndex = this.dataStream.control[i].optionIndex;
                    if(this.selectedIndex == i){ // If current selected control is the one we're drawing, change it's color
                        this.font.draw(this.dataStream.control[i].text, 0, (20 * i), 'left', 'rgba( 0, 255 , 0 ,1)');
                        this.font.draw(this.textData[optionIndex], 250, (20 * i), 'left', 'rgba( 0, 255 , 0 ,1)')
                    } else{ // Draw the control normally.
                        this.font.draw(this.dataStream.control[i].text, 0, (20 * i), 'left', 'rgba( 255, 255 , 255 ,1)');
                        this.font.draw(this.textData[optionIndex], 250, (20 * i), 'left', 'rgba( 255, 255 , 255 ,1)');
                    }
                }

Do I have wrong collision attributes set or am I doing something wrong?

Source is here: http://paste.laravel.com/1gaS

Your coin is checking for collisions with the projectile:

// Coin checkAgainst
checkAgainst: ig.Entity.TYPE.A,
// Laser TYPE
type: ig.Entity.TYPE.A,

An easy solution is to add an if branch in your coins check() function checking to see what is hitting it.

I need my main.js just for general methods and loading purposes. How can I do this?

Move all of your game screens into their own Impact modules / .js files, require them when needed and then use ig.system.setGame: http://impactjs.com/documentation/class-reference/system#setgame

How can I check if target X,Y is on a collision object?

You can run your own trace of the collisionMap to determine if there is a collision at a specific point. However, this will only give you results for the collisionMap. If you have other entities running around that are solid then the problem will remain.

var res = ig.game.collisionMap.trace( x, y, vx, vy, objectWidth, objectHeight );

if( res.collision.x || res.collision.y ) {
    // The trace collided with the map at
    // (res.pos.x, res.pos.y)
}

More info here: http://impactjs.com/documentation/class-reference/collisionmap

As for inheritence, how can I make my projectiles inherit from main projectile object?

It works like you thought it did.

// The abstract projectile
ig.EntityProjectileModel = ig.Entity.extend({
     //Boilerplate code!
     //Collision, check, init, things like that.
})

EntityBigProjectile = ig.EntityProjectileModel.extend({
      animSheet: ...,
      damage: 500,
      speed: 300
})

EntitySmallProjectile = ig.EntityProjectileModel.extend({
      animSheet: ...,
      damage: 200,
      speed: 600
})

When you want to call code from the parent class, you use this.parent(params);

When I add an entity with Weltmeister, they reappear when I switch levels.

Is there any workaround for this apart from defining what objects should spawn on our game's init() method?

Not that I know of, no. What I do: When a level is first loaded, I copy the entities from the level data into the localStorage API. For every subsequent load of that level, I use my copy of the entities from the localStorage API to create the entities, and not the level file. If an entity is dead, I simply remove it from localStorage and it will not be spawned.

How can I add an object where I store log messages? (Something like chat feature on MMORPG games.

Create an Object and then populate it with messages:

var objectGameMessages = {"messageList": [ ] };
objectGameMessages.messageList.push("New message");
console.log(objectGameMessages.messageList[0]);

You don't have to use an array. You can use nested objects if you'd like and append a DateTime value to a message, remove it from the list when the DateTime passes, etcetcetc.

How can I disable pressing and holding down input keys?

Are you using ig.input.state or ig.input.pressed ? .state = As long as the key is down, do something. .pressed = Do something when the key is down, but don't do something again until the key is first released and then pressed again.

Is what I'm trying to do seems overkill? I plan on developing an ARPG games with the following features from Path of Exile/Diablo.

Honestly, only you can say for sure if you can handle a large project like you described. My advice: Take all of the elements of your project and break them down into smaller projects. That way, you always feel like you are getting something productive done and completing something.

For example, focus on your online save feature. Get it complete and working. Mark the project as complete. Next, create a new project focused on player skills, not player movement or anything else. Cycle the skills using the keyboard and complete it to your liking. Continue doing this; turning all of the features you want for a larger game into smaller games. When you're ready, combine all of it into your larger game, then focus only the content.

Thank you so much for the replies. You're awesome!

Why not pick-up one of the Impact starter books?

I do. I'm reading Davy Cielen's book and I'm half way though it. It won't cover some of my questions.

Your coin is checking for collisions with the projectile.

Thought about that, but can't we add custom checks ourself? Perhabs give it an array of Entity types to check?

type: ig.Entity.TYPE.A,

to:

type: ['A', 'Barrel', 'DestructableWall'],
checkAgainst: //same

Move all of your game screens into their own Impact modules / .js files, require them when needed and then use ig.system.setGame: http://impactjs.com/documentation/class-reference/system#setgame

A little code sample for this would be extremely helpful. I couldn't understand how I require things dynamically.

You can run your own trace of the collisionMap to determine if there is a collision at a specific point.

Does it also work with collision map created on Weltmeister or should I define all collision points in init() method? (I hoooope not)

For every subsequent load of that level, I use my copy of the entities from the localStorage API to create the entities, and not the level file. If an entity is dead, I simply remove it from localStorage and it will not be spawned.

Hmm, I was thinking about game.init() method but just realized I may not be able to bind entities on different maps. Using local storage sounds ok, but I will probably save those on server side and return a JSON file each time map changes. I'll probably use AngularJS for this. (fallback to jQuery)

One thing, I'm not experienced with local storage feature. Is it cross browser compatiple? Does it have a basic abstraction class that I can use on my projects? Does it work on mobile?

Are you using ig.input.state or ig.input.pressed ?

>.>

I was using states. Gonna replace all to pressed now.

Honestly, only you can say for sure if you can handle a large project like you described.

I built enterprise level things in the past so I know how to deal with complexity. However, I'm not a javascript ninja yet. I currently feel like: I can build something awesome with my 50.000 backend lego pieces eyes closed. I also feel like I can do it with Javascript/ImpactJS, but some of the lego parts are really unfamiliar to me and I need to learn their purpose before starting to build things.

This is why I ask so many things. Everything should be easy to maintain, should be open for modification, should contain inheritence and abstractions. Whole thing needs to feel correct in my head, otherwise I keep thinking about unsolved problems while developing features, so I jump from a place to another place.

I understand your point, but I can do if there is something should be done on my side. I just don't know if I can rely on ImpactJS.

Most of them are not very complex things. For example increased damage shrine basically does player.damageBonusFromShrines = 30; and starts an 2 minute timer, sets back to default when timer stops. Same goes for increased projectile speed, same for increased movement speed.

What I wonder is if ImpactJS is capable of running a mini diablo game on 30-60 FPS? Yes, I know my codes may change the outcome but nobody will attempt on going 300KMH on 1960 model crappy russian Lada, so I don't want to test doing 300KMH with an engine that is capable of doing 100KMH at maximum. Don't know if I could make a point.

By the way, this is my game in it's current state, if you're interested in having a look: http://oyun.eu1.frbit.net/

Made it in 2 days with zero ImpactJS knowledge. Worked like 32 hours in total. (Thankfully to the coffees and you!)

I'm pretty happy with the outcome so far, just wanted to share it. :)

Thought about that, but can't we add custom checks ourself? Perhabs give it an array of Entity types to check?

type: ig.Entity.TYPE.A,

to:

type: ['A', 'Barrel', 'DestructableWall'],
checkAgainst: //same

Unfortunately no. Impact is limited to its A, B, BOTH, NONE for collision types by default. There is a plugin though that changes it to a user-defined group system: http://impactjs.com/forums/code/entitytype-plugin

Does it also work with collision map created on Weltmeister or should I define all collision points in init() method? (I hoooope not)

When a level is loaded via loadLevel function, the collision layer is stored in ig.game.collisionMap. So yes, it'll work fine with Weltmeister created levels.

One thing, I'm not experienced with local storage feature. Is it cross browser compatiple? Does it have a basic abstraction class that I can use on my projects? Does it work on mobile?

localStorage API / Web Storage is a HTML5 specification to handle key: value storage in a browser, separate from browser cache / cookies. It is supported by all major browsers: Chrome 4+, Firefox 3.5+, Safari 4+, IE8+, iOS 3.2+, Android 2.1+, Opera Mobile 11.5+

There are Impact plugins providing easy to use localStorage functionality, but you could easily just use it as is: http://www.w3schools.com/html/html5_webstorage.asp

What I wonder is if ImpactJS is capable of running a mini diablo game on 30-60 FPS? Yes, I know my codes may change the outcome but nobody will attempt on going 300KMH on 1960 model crappy russian Lada, so I don't want to test doing 300KMH with an engine that is capable of doing 100KMH at maximum. Don't know if I could make a point.

Impact / HTML5 in general is entirely capable of making the game you want to make. You may need to resort to WebGL rendering (Or even PixiJS) if you plan on pushing large amounts of entities to the visible screen at once (Especially on Mobile browsers) since Canvas2D API may not be fast enough if you intend to push thousands of entities at once. Here is a good benchmark using different methods (Not all of which are Impact-default) and receiving favorable results: http://impactjs.com/forums/code/how-to-get-over-5000-entities-onscreen. There are live examples in the repo description.

Impact / HTML5 in general is entirely capable of making the game you want to make. You may need to resort to WebGL rendering (Or even PixiJS) if you plan on pushing large amounts of entities to the visible screen at once (Especially on Mobile browsers) since Canvas2D API may not be fast enough if you intend to push thousands of entities at once. Here is a good benchmark using different methods (Not all of which are Impact-default) and receiving favorable results: http://impactjs.com/forums/code/how-to-get-over-5000-entities-onscreen. There are live examples in the repo description.

My tests gave those results:

Impact: 32 FPS at 5.000 particle
Impact-Fast: 46 FPS at 5.000 particle.
WebGL (3rd test): 48 FPS at 5.000 particle.

Impact-Fast: 15 FPS at 20.000 particle.
WebGL (3rd test): 35 FPS at 150.000 particle.

I'll wonder one thing though. 46 FPS at 5.000 particles are way more than enough for me but I wonder if those particle icons are being cached because they all share the same image. For example, if the above test was done by generating different colored images for each particle, would that make a difference performance wise?