Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Open
err0 opened this Issue · 9 comments

3 participants

@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
Owner

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
Owner

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
Owner

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.

@kxh

was it really work now?

@ippa
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.