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 ); } }) });