1 decade ago by Jack9
This took awhile to develop. About 3 days of fiddling. There is no STANDARD way to get an animated border into a canvas without javascript. Animations with CSS do not apply to borders, due to the HTML5 standard for strokeStyle.
I have hacked together a selection box class that is SIMILAR to the AnimationSheet + Animation classes. They can probably be used to do a lot of this work, but I opted for a custom solution as I developed. You will need 8 files named selectFrame0.jpg through selectFrame7.jpg to use this example as-is.
I have hacked together a selection box class that is SIMILAR to the AnimationSheet + Animation classes. They can probably be used to do a lot of this work, but I opted for a custom solution as I developed. You will need 8 files named selectFrame0.jpg through selectFrame7.jpg to use this example as-is.
//in your main.js - add this line to your init()...
this.selectionBox = this.spawnEntity('SelectionBox', 0, 0, {fileName:"media\\selectFrame",fileExtension:".jpg",frames:8,frameFreq:3});
// The module is defined below here:
ig.module(
'game.entities.ui.SelectionBox'
)
.requires(
'impact.impact',
'impact.entity'
)
.defines(function(){
SelectionBox = ig.Entity.extend({
sequence:0,
// Custom properties
startx: -1,
starty: -1,
x: -1,
y: -1,
drawing:false,
rendered:false,
fileName:null,//"media\\selectFrame",
fileExtension:null,//".jpg",
frames:8,
frameFreq:3,
curFrame:0,
frameTime:0,
init:function(x,y,settings){
//console.log(settings);
this.fileName = settings.fileName;
this.fileExtension = settings.fileExtension;
this.frames = settings.frames;
this.frameFreq = settings.frameFreq;
},
update:function(){
},
draw:function(){
this.sequence = (this.sequence+1 >= ig.system.fps) ? 0 : (this.sequence+1);
this.parent();
this.checkSelections();
},
checkSelections:function(){
var mouse_x = ig.input.mouse.x;
var mouse_y = ig.input.mouse.y;
if( ig.input.pressed('select')){
this.startx = mouse_x;
this.starty = mouse_y;
this.setSelectBoxBounds(mouse_x,mouse_y);
this.drawing = false;
this.rendered = false;
}else if(
!!ig.input.state('select') && // true
!this.rendered
){
if(!(this.x === mouse_x && this.y === mouse_y)){
this.setSelectBoxBounds(mouse_x,mouse_y);
this.drawing = true;
}
}else{
if (!ig.input.state('select') && // false
!(mouse_x === this.startx && mouse_y === this.starty) &&
!this.rendered
){
this.setSelectBoxBounds(mouse_x,mouse_y);
this.rendered = true;
// DO SELECTION HERE
}
if(!this.rendered){
this.drawing = false;
}
}
if(this.drawing){
this.drawSelectBox();
}
//console.log(ig.input.state('select'));
},
setSelectBoxBounds:function(mouse_x,mouse_y){
var canvas = ig.system.context.canvas;
var scale = ig.system.scale;
if(mouse_x*scale >= canvas.clientWidth){
mouse_x = (canvas.clientWidth-1)/scale;
}else if(mouse_x < 0){
mouse_x = 1;
}
if(mouse_y*scale >= canvas.clientHeight){
mouse_y = (canvas.clientHeight-1)/scale;
}else if(mouse_y < 0){
mouse_y = 1;
}
this.x = mouse_x;
this.y = mouse_y;
this.width = this.x-this.startx;
this.height = this.y-this.starty;
},
drawSelectBox:function(){
var scale = ig.system.scale;
var context = ig.system.context;
if(this.frameTime >= this.frameFreq){
//console.log("frame change @ seq",this.sequence+1);
this.curFrame++;
if(this.curFrame >= this.frames){
this.curFrame = 0;
}
this.frameTime = 0;
}
this.frameTime++;
var image = new Image();
image.src = this.fileName+this.curFrame+this.fileExtension;
context.strokeStyle = context.createPattern(image,'repeat');
context.lineWidth = 1;
context.lineJoin = 'miter';
context.strokeRect (
this.startx*scale,
this.starty*scale,
this.width*scale,
this.height*scale
);
}
})
});
