1 decade ago by Cavalier
Hi, I'm starting out a RTS using impact and I'd like to know where I can get a tutorial, tips or stuff like that.
This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact
//Deadzone in pixels
var dzonex = 30;
var dzoney = 20;
MyGame = ig.Game.extend({
//Inside update function
if(ig.input.state('rclick')){
//Horizontal movement
if (ig.input.mouse.x > (ig.system.width/2)) {
if (ig.input.mouse.x > (ig.system.width/2)+dzonex) {
//Check right border
if (ig.game.screen.x < this.rightBorder -30){
ig.game.screen.x +=20;
}
else {//Avoid going out of bounds by setting back to this value
ig.game.screen.x = this.rightBorder;
}
}
} else {
if (ig.input.mouse.x < (ig.system.width/2)-dzonex) {
//Check left border
if (ig.game.screen.x > 30){
ig.game.screen.x -=20;
}
else {//Avoid going out of bounds by setting back to this value
ig.game.screen.x = 0;
}
}
}
//Vertical movement
if (ig.input.mouse.y > (ig.system.height/2)) {
if (ig.input.mouse.y > (ig.system.height/2)+dzoney) {
//Check right border
if (ig.game.screen.y < this.bottomBorder -30){
ig.game.screen.y +=20;
}
else {//Avoid going out of bounds by setting back to this value
ig.game.screen.y = this.bottomBorder;
}
}
} else {
if (ig.input.mouse.y < (ig.system.height/2)-dzoney) {
//Check left border
if (ig.game.screen.y > 10){
ig.game.screen.y -=20;
}
else {//Avoid going out of bounds by setting back to this value
ig.game.screen.y =0;
}
}
}
ig.module('game.entities.player').
requires('impact.entity').defines(
function() {
//code
EntityPlayer = ig.Entity.extend ({
animSheet: new ig.AnimationSheet( 'media/charset/char1.png', 24, 32 ),
maxVel: {x: 300, y: 300},
health:10,
update: function(){
if (ig.input.pressed('lclick') && this.inFocus()) {
console.log('clicked');
ig.log('clicked');
this.selected = true;
}
if (ig.input.state('lclick') && this.selected) {
this.targetx = ig.input.mouse.x + ig.game.screen.x;
this.targety = ig.input.mouse.y + ig.game.screen.y;
console.log('posX = '+ this.pos.x + 'posX = '+ this.vel.x);
console.log('posY = ' + this.targetx + ' - ' + this.targety);
}
this.distancetotargetx = this.targetx - this.pos.x - 24 ;
this.distancetotargety = this.targety - this.pos.y - 32 ;
if (this.distancetotargetx > 1 ){this.vel.x = 40;}
if (this.distancetotargetx < 1){this.vel.x = -40;}
this.parent;
},
inFocus: function() {
return ((this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
)},
init: function(x, y, settings){
this.size.y = 32;
this.size.x = 24;
this.addAnim('idle',0.5, [0,1,2]);
this.addAnim('walkleft',0.5, [0,1,2,1,3]);
this.currentAnim = this.anims.idle;
this.parent(x, y, settings);
}
})
});
showUnitFrames: function(){
ig.game.spawnEntity( EntityCheapGuyFrame, (this.pos.x + this.size.x)+4 , this.pos.y , {ownerBuilding: this});
ig.game.spawnEntity( EntityHeavyGuyFrame, (this.pos.x + this.size.x)+4 , this.pos.y + 18, {ownerBuilding: this} );
ig.game.spawnEntity( EntityFastGuyFrame, (this.pos.x + this.size.x)+4 , this.pos.y + 36, {ownerBuilding: this});
ig.global.selected=this;
}
EntityUnitFrame = ig.Entity.extend({
size: {x: 16, y: 16},
type: 'unitFrame',
//Ideally, use a single file for all unit frames, so they only overwrite trainTime and frame
animSheet: new ig.AnimationSheet('media/charset/unitframes.png', 17, 17 ),
ownerBuilding: 0,
trainTime: 1,
init: function( x, y, settings ) {
this.parent( x, y, settings );
// Add the animations
this.addAnim( 'cheap', 1, [0] );
this.addAnim( 'medium', 1, [1] );
this.addAnim( 'tank', 1, [2] );
this.addAnim( 'fast', 1, [3] );
this.addAnim( 'heavy', 1, [4] );
// Switch animations on Init
this.currentAnim = this.anims[this.frame];
console.log('Owner Building: ' + this.ownerBuilding);
},
inFocus: function() {
return ((this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
)},
trainUnit: function() {
this.ownerBuilding.timer = new ig.Timer(this.trainTime);
this.ownerBuilding.training = true;
console.log('Training started! Building: ' + this.ownerBuilding);
},
update: function() {
if (ig.input.pressed('rclick')) {
this.kill();
}
if (ig.input.pressed('lclick')){
if (this.inFocus()){
//kills all unitFrames and starts training
var frames = ig.game.entities;
var len = frames.length;
for(var i = 0;i<len;i++){
if ((frames[i].type=='unitFrame')){
frames[i].kill();
}
}
this.trainUnit();
}
}
this.parent();
}
});
ig.module('game.entities.building')
.requires('impact.entity',
'game.entities.SuperUnit',
'game.entities.HeavyGuy')
.defines(function(){
EntityBuilding = ig.Entity.extend({//...
//Error messages ▼
Uncaught Module 'game.entities.heavyGuy' is already defined impact.js:234
Uncaught Unresolved (circular?) dependencies. Most likely there's a name/path mismatch for one of the listed modules:
game.main (requires: game.levels.test1)
game.levels.test1 (requires: game.entities.building)
game.entities.building (requires: game.entities.HeavyGuy) impact.js:348
ig.module(
'game.entities.pointer'
)
.requires(
'impact.entity'
)
.defines(function() {
EntityPointer = ig.Entity.extend({
name: 'pointer',
checkAgainst: ig.Entity.TYPE.A,
size: {x:1, y:1},
isClicking: false,
update: function() {
// Update the position to follow the mouse cursor.
this.pos.x = ig.input.mouse.x + ig.game.screen.x;
this.pos.y = ig.input.mouse.y + ig.game.screen.y;
this.screenX = ig.input.mouse.x;
this.screenY = ig.input.mouse.y;
if (ig.input.pressed('click')) {
//Save the co-ord of where you initially clicked
//Allows you to drag and compare to initial click location
this.clickLocX = this.pos.x;
this.clickLocY = this.pos.y;
}
},
check: function( other ) {
// User is clicking and the 'other' entity has a 'clicked' function?
if(
ig.input.state('click') &&
typeof(other.clicked) == 'function'
) {
other.clicked();
}
}
});
});
clicked: function() {
//Add your click code here, this is an example of what I use
this.selected = true;
}
inFocus: function() {
return ((this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
)},
update: function(){
if ('leftclick' && this.inFocus) {
//this was clicked over
}
//without the left click, it'll enter whenever you hover the mouse over said entity
}
movement: function(){
if( this.destinationx < 9999999 && this.destinationy < 9999999 ) {
// Accounts for center of character's collision area
this.distancetotargetx = this.destinationx - (this.pos.x + (this.size.x/2));
this.distancetotargety = this.destinationy - (this.pos.y + (this.size.y/2));
if( Math.abs(this.distancetotargetx) > 3 || Math.abs(this.distancetotargety) > 3 ) {
if( Math.abs(this.distancetotargetx) > Math.abs(this.distancetotargety) ) {
// Move right
if( this.distancetotargetx > 0.6 ) {
this.vel.x = this.speed;
this.xydivision = this.distancetotargety / this.distancetotargetx;
this.vel.y = this.xydivision * this.speed;
this.currentAnim = this.anims.right;
}else { // Move left
this.vel.x = -this.speed;
this.xydivision = this.distancetotargety / Math.abs(this.distancetotargetx);
this.vel.y = this.xydivision * this.speed;
this.currentAnim = this.anims.left;
}
}else {
// Move down
if( this.distancetotargety > 0.6 ) {
this.vel.y = this.speed;
this.xydivision = this.distancetotargetx / this.distancetotargety;
this.vel.x = this.xydivision * this.speed;
}else { // Move up
this.vel.y = -this.speed;
this.xydivision = this.distancetotargetx / Math.abs(this.distancetotargety);
this.vel.x = this.xydivision * this.speed;
}
}
}else {
this.vel.y = 0;
this.vel.x = 0;
this.destinationx = 99999999;
this.destinationy = 99999999;
}
}
},
this.movement() inside your unit class' update(), outside any if conditions.
if (ig.input.pressed('lclick')){
this.destinationx = ig.input.mouse.x + ig.game.screen.x;
this.destinationy = ig.input.mouse.y + ig.game.screen.y;
}
039;ve managed to make the selected units form straight lines of 6. If their collision is set to #ACTIVE, you'll see some pushing here and there. Mine's are passive as of now
moveAll:function(){
var leader = ig.global.selected[0];
var distx = leader.destinationx - (leader.pos.x + (leader.size.x/2));
var disty = leader.destinationy - (leader.pos.y + (leader.size.y/2));
var mousePosy = (ig.input.mouse.y + ig.game.screen.y);
var mousePosx = (ig.input.mouse.x + ig.game.screen.x);
var line = 0;
var evenNumber = true;
var coluna = 0;
for (var j = 0; j < ig.global.selected.length ; j++) {
var current = ig.global.selected[j];
var posicao = 0;
if (coluna > 5){coluna = 0; line++;}
if (Math.abs(distx) > Math.abs(disty) ) {
//6 posições Y diferentes
posicao = (current.size.y * coluna);
/*The below IF is optional, it serves to put the leader in the middle and each unit to the left/right of his position*/
if (evenNumber) {posicao = posicao * (-1); evenNumber = false;} else {evenNumber = true;}
current.destinationy = mousePosy - posicao;
current.destinationx = leader.destinationx - ((current.size.x + 6) * line);
} else {
//6 posições X
posicao = (current.size.y * coluna) + 8;
if (evenNumber) {posicao = posicao * (-1); evenNumber = false;} else {evenNumber = true;}
current.destinationx = mousePosx - posicao;
current.destinationy = leader.destinationy - ((current.size.y + 4) * line);
}
coluna++;
}
},
generateMap: function(rows, columns){
var maparray = [];
var rowarray = [];
var colmaprow = [];
var colmap = [];
var tilefactor = 2;
var tilesize = 32;
var collision = 0;
this.mapheight = 50;
this.mapwidth = 50;
for (var y = 0; y < this.mapheight; y++) {
for (var x = 0; x < this.mapwidth; x++) {
if ((y > 0 && y < this.mapheight - 1) &&
rowarray.length > 0 && rowarray.length < this.mapwidth - 1) {
var tile = Math.random();
if (tile > 0.89) {
//Collision background
collision = 1;
tile = 2+tilefactor;
} else {
//Not collision
collision = 0;
tile = 1+tilefactor;
}
rowarray.push(tile);
colmaprow.push(collision);
} else {
//Borders are black with collisions
rowarray.push(0);
colmaprow.push(1);
}
}
maparray.push(rowarray);
colmap.push(colmaprow);
var rowarray = [];
var colmaprow = [];
}
this.collisionMap = new ig.CollisionMap( tilesize, colmap );
var bgmap = new ig.BackgroundMap( tilesize, maparray, this.maptile );
this.backgroundMaps.push(bgmap);
//I use these for map scrolling boundaries, so the camera doesn't stray away
this.rightBorder = ig.game.backgroundMaps[1].pxWidth - ig.system.width;
this.bottomBorder = ig.game.backgroundMaps[1].pxHeight - ig.system.height;
ig.global.rightBorder = ig.game.backgroundMaps[1].pxWidth - ig.system.width;
ig.global.bottomBorder = ig.game.backgroundMaps[1].pxHeight - ig.system.height;
},
//Inside the update function
if (ig.input.state('zoom out')) {
//Change to 1 for 'zoom in' in a different if statement
zoomLevel = 0.5;
for( var i in ig.Image.cache ) {
ig.Image.cache[i].resize( zoomLevel );
}
this.resize();
};
resize: function() {
ig.system.resize(320 / zoomLevel,480 / zoomLevel, zoomLevel);
this.draw();
},
ig.Image.inject({
resize: function( scale ) {
if( !this.loaded ) { return; }
if( !this.scaleCache ) { this.scaleCache = {}; }
if( this.scaleCache['x'+scale] ) {
this.data = this.scaleCache['x'+scale];
return;
}
// Retain the original image when scaling
this.origData = this.data = this.origData || this.data;
if( scale > 1 ) {
// Nearest neighbor when zooming in
this.parent( scale );
}
else {
// Otherwise blur
var scaled = ig.$new('canvas');
scaled.width = Math.ceil(this.width * scale);
scaled.height = Math.ceil(this.height * scale);
var scaledCtx = scaled.getContext('2d');
scaledCtx.drawImage( this.data, 0, 0, this.width, this.height, 0, 0, scaled.width, scaled.height );
this.data = scaled;
}
this.scaleCache['x'+scale] = this.data;
}
});
if (ig.input.state('zoom in')) {
if(zoomLevel <= 0.975) {
zoomLevel += 0.025;
}
else {
zoomLevel = 1;
}
for( var i in ig.Image.cache ) {
ig.Image.cache[i].resize( zoomLevel );
}
this.resize();
};
if (ig.input.state('zoom out')) {
if(zoomLevel >= 0.275) {
zoomLevel -= 0.025;
}
else {
zoomLevel = 0.25;
}
for( var i in ig.Image.cache ) {
ig.Image.cache[i].resize( zoomLevel );
}
this.resize();
};