add fillRect and fillStyle to sprites (& sprite lists, tile maps)

[err0]

I was thinking it might be useful to be able to create sprites using fillRect and fillStyle as per the canvas 2D context spec, for quick colored background, blocks etc. This could have been used in example 8 instead of block.bmp

Long term creation of sprites using other drawing methods like beginPath & arc could also be cool.

Thoughts?

[ippa]

I don't think there's nothing stopping you from doing that right now? sprite.setImage( ) can take an image or canvas which you have loaded or dynamically created. Maybe I'm missing some finer details of your suggesion?

[err0]

could a canvas be used at sprite creation? Should work the same as sprite.setImage()? For example trying to alter example 12 (replacing grass.png) I am getting "Uncaught Error: INVALID_STATE_ERR: DOM Exception 11" in sprite.js line 272:

function canvasRect(width, height, style) {
   var canvas = document.createElement("canvas")
   canvas.width = this.width
   canvas.height = this.height
   var context = canvas.getContext("2d")
   context.fillStyle = this.style;
   context.fillRect(0, 0, this.width, this.height);
   return canvas;
   };

green_block = new canvasRect(32,32,"rgb(42,255,0)");

  /* Called once when a game state is activated. Use it for one-time setup code. */
  this.setup = function() {
    fps = document.getElementById("fps")
    blocks = new jaws.SpriteList()

    for(var i = 0; i < width; i++) {
      for(var i2 = 0; i2 < height; i2++) {
        blocks.push( new Sprite({image: green_block , x: i*32, y: i2*32}) )
      }
    }

[ippa]

try "return canvas.context" instead of "return canvas" .. does it work?

It should. But we could also patch setImage to detect a canvas and do that automatically for us, should be supersimple

[err0]

if I do that it looks like it's getting hung up looking for and trying to create an asset:

Uncaught TypeError: Cannot read property '1' of null assets.js:66
jaws.Assets.getPostfix assets.js:66
jaws.Assets.getType assets.js:70
jaws.Assets.load assets.js:132
jaws.Sprite.setImage sprite.js:101
jaws.Sprite.set sprite.js:60
Sprite sprite.js:28
Example.setup example12.html:51
jaws.GameLoop.start game_loop.js:64
jaws.switchGameState core.js:248
assetsLoaded core.js:207
jaws.Assets.processCallbacks assets.js:217
jaws.Assets.assetLoaded assets.js:192

[ippa]

ok, I got confused. It should be an canvas, not a context. So your first example should work. Look at example11.html ... jaws.gfx.retroScaleImage() returns a canvas. Which I one line later send into a Sprite() constructor.

[ippa]

https://github.com/ippa/jaws/blob/master/src/gfx.js#L13 <-- retroScaleImage()

https://github.com/ippa/jaws/blob/master/examples/example11.html#L32-33 <-- jaws.Sprite() using a canvas

[kxh]

was it really work now?

[ippa]

not sure what you mean kxh?

[kxh]

I do it like this
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
context.putImageData(jaws.context.getImageData(0,0,width,height),0,0);
var result = new jaws.Sprite({
image : canvas,
x : 80,
y : 480
});
it can`t be this

new jaws.Sprite({
image : jaws.canvas,
x : 80,
y : 480
});