ippa / jaws Goto Github PK

View Code? Open in Web Editor NEW

364.0 364.0 75.0 2.21 MB

Jaws - HTML5 canvas javascript 2D Game Framework

Home Page: https://jawsjs.ippa.se

License: GNU Lesser General Public License v3.0

CSS 1.03% JavaScript 97.45% HTML 1.52%

jaws's People

Contributors

Stargazers

Watchers

jaws's Issues

Feature Request: Text Support

This is just as much a question as it is a feature request: Is there a reason that there isn't any support for drawing text?

I'm considering creating a copy of the Sprite class and modifying it to create a "Text" class that will accept a "text" option instead of a "image" option. Additionally, I would swap the setImage() method with a setText() method.

Are there any reasons that I -shouldn't- do it this way? Is there a better way? If there are already plans to add text support, should I even bother?

Thanks!

PixelMap 'tainted cross-origin data' in chrome 25

Trying to use the PixelMap functionality in chrome, but it seems to have issues loading the content (something to do with it using a canvas internally to store/modify the image?). The below code works with no issues in firefox 18

code looks like so:

jaws.setup = function()
{
    [...]
    pixelmap = new jaws.PixelMap({image: "skyline.png", scale_image: 1})
    [...]
}
jaws.onload = function()
{
    [...]
    jaws.assets.add("skyline.png")
    [...]
}

stacktrace is below:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. jaws.js:677
jaws.retroScaleImage jaws.js:677
PixelMap jaws.js:2969
Example3.setup ds.js:9
GameLoop.start jaws.js:1591
jaws.switchGameState jaws.js:404
assetsLoaded jaws.js:348
processCallbacks jaws.js:1453
assetLoaded jaws.js:1400
Uncaught Error: SecurityError: DOM Exception 18 jaws.js:677
jaws.retroScaleImage jaws.js:677
PixelMap jaws.js:2969
Example3.setup ds.js:9
GameLoop.start jaws.js:1591
jaws.switchGameState jaws.js:404
assetsLoaded jaws.js:348
processCallbacks jaws.js:1453
assetLoaded jaws.js:1400

canvas doesn't render in certain cases

Depending on various dimensions, I get a white page instead of a canvas. I think it's related to the max width and max width of my viewport compared to the size of the canvas. You can reproduce the problem here: http://pastebin.com/1YK4DBNT . To fix the problem, in that code change config.mapXTileCount to 51 (instead of 50).

For example, on a canvas that's 1024x768, I get the problem when the viewport has max_x of 1000 and a max_y of 1000. I don't get the problem when the viewport's max_x is 1020.

Problem with viewport.move(x,y), when argument is float

Hi.
I have a problem with viewport when it's moved by non-integer numbers.
There is modified example#12:

http://dreamella.pl/jaws/examples/example12,5.html

I change the droids moving speed from 2.00 to 2.11 and add red background to canvas.
If you move droid to position, for example, 400, 400 you will see red lines.
This problem appear in Fire Fox 18, Opera Next 12.12 and Internet Explorer 9.
In Google Chrome 23.0.1271.97 m (latest version) work fine.

My OS is Windows 7 Proffesional up to date.

Rotate viewport

I'm not sure how hard this would be but I think it would be awesome to be able to rotate view-ports.

Player is Not Defined

Hey ippa,
This jaws library is amazing, but i've run into a bug that I simply cannot figure out and thought I'd get your take on it.

The game keeps pausing at 100% loaded and when I check my console it tells me, game.js:28Uncaught ReferenceError: player is not defined

Its very odd, because my player is defined and I cannot for the life of me figure this out.

Thanks

My game.js file

function Game() {
  this.setup = function() {
    this.player = new jaws.Sprite({
      image: "plane.png",
      x: jaws.width / 2,
      y: jaws.height / 2,
      anchor: "center"
    });
    jaws.preventDefaultKeys(["up", "down", "left", "right"]);
    return;
  };
  this.update = function() {
    if (jaws.pressed("left")) {
      player.x -= 2;
    }
    if (jaws.pressed("right")) {
      player.x += 2;
    }
    if (jaws.pressed("up")) {
      player.y -= 2;
    }
    if (jaws.pressed("down")) {
      player.y += 2;
    }
    return;
  };
  this.draw = function() {
    player.draw(); // This is the line calling the error ------------------------
    return;
  };
  return;
};
window.onload = function() {
  jaws.assets.add("plane.png");
  jaws.start(Game);
  return;
};

and my index.html file

<html>
  <head>
    <title>Test Game with Jaws Framework</title>
  <script src="jaws.js" type="text/javascript"></script> 
  </head>
  <body>
    <canvas></canvas>
    <script src="game.js"></script> 
  </body>
</html>

canvas squished on x axis if id=canvas

If I set the id of the canvas to "canvas" the whole thing renders squished.

this isn't a huge issue because if the id="something_else" it doesn't matter, but I thought i would mention it as it might point to some broken logic in core.js

Cannot rotate sprite properly

Great library but I am finding difficulties with rotating a sprite properly. I used to work with this:

context.save();
context.beginPath();
context.translate(xCenter, yCenter);
context.scale(1, 0.5);
context.scale(2.75, 2.75);
context.rotate(-rot);
context.translate(-128, -128);
context.drawImage(image, 0, 0);
context.closePath();
context.restore();

The result is an isometric rotation.

But with JawsJS I find it hard to invoke these methods on the context in that order because the draw function is very limited. What would be a correct approach?

Feature? Delete from TileMap

Hi there!
Wouldn't it be cool if we could delete objects from a TileMap no?
Therefore a bunch of functions wourd be welcome:

jaws.TileMap.pop()
jaws.TileMap.popAsPoint()
jaws.TileMap.popAsRect()
jaws.TileMap.popFromCell() ?

One more thing to think about. What to do when there's more than one object on a tile? Delete the whole array?..

Setting the frame_direction property of an animation to -1 causes the animation to loop on the first frame.

The current code in the animation.update() function looks like this...

else if(this.loop) {
    this.index = 0
}

If you change the code to look like this in the "loop" clause, reversed animations will play correctly

   else if(this.loop) {
      if(this.frame_direction < 0) { 
        this.index = this.frames.length -1; 
      } else { 
        this.index = 0; 
      }
    }

More SpriteSheet flexibility

Looking at the docs and the code of the SpriteSheet class, there is limited flexibility regarding cutting up sprite sheets. They have to fixed sized frames in horizontal or vertical order. Working with (an example, Google'd for "sprite sheet") something like this: (http://www.pixeljoint.com/files/icons/full/sprite_sheet.png) is currently not possible (or am I missing something?).

Should I refactor my sprite sheet so Jaws can work with it properly or is there a more efficient way to do this?

SpriteList still drawing elements after they're removed

Hi ippa,

So after beating my head against the wall on this issue all last night, this is what I found out.

If you add a sprite to a SpriteList, and then remove it, and then call draw() on the sprite list,
the removed sprite is still drawn.

What this actually boils down to is:

list = new SpriteList
list.push('a')
list[0]  //=> 'a'
list.splice(0, 1)  
list.length  //=> 0. But!
list[0] //=> 'a', still

You can see a more detailed demo here:
https://github.com/dmitrizagidulin/IronSanta/blob/c03fdaeb2ad6c48475e3d082751bc961867ca692/sprite_list_issue.html

And the reason for THAT behavior is, basically, you can't subclass Array, in javascript, as this excellent article explains:
http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/

Meaning, it's not just the SpriteList. You can duplicate this behavior by creating any subclass of Array (ie creating a new object and setting Array as its prototype, as JawsJS does). The resulting "subclass" of Array will not behave properly with regards to various methods, including splice()

So.. would you accept a patch to rewrite SpriteList using composition instead of inheritance? (that is, a SpriteList would have an attribute called 'contents', which would be an actual array, which would store the list of sprites, and delegate its calls to it, etc)

distanceBetween seems to have an obvious bug...

jaws.distanceBetween = function(object1, object2) {
return Math.sqrt( Math.pow(object1.x-object2.x, 2) + Math.pow(object1.y, object2.y, 2) )
}

I think the last pow call needs to subtract the y's like this:
Math.pow(object1.y - object2.y, 2)

CocoonJS integration

Everything I'm doing works great in all the desktop browsers I've tested. But when i load up a Test Jaws game with a test game state inside of the CocoonJS launcher (for mobile devices) , I get the error below

JSUtilities Exception: TypeError: Result of expression 'asset' [undefined] is not an object. Line: 778 File: 1494923456 Tag: load

This happens whenever i try to make a new jaws.Sprite

I know it's because of the CocoonJS launcher, because it isn't a complete browser. It has a lot stripped out of it. But i was wondering if there was a way to get Jaws completely compatible with CocoonJS? Or if anyone has ran into this problem too?

Gamepad support, multiplayer considerations?

Hey there,

Just wondering if you've spent any time working with the Gamepad API, now that it's in live builds of Chrome and Firefox... I whipped up something to add support myself, but it's far from perfect at this point. Xbox 360 support only, but that would be easy enough to change. Feel free to check it out on my fork: https://github.com/zatch/jaws

Criticisms and enhancements appreciated!

-Zatch

Made simple game using jaws

Hi ippa,

It was fun using jaws:

The game can be played at:
http://pajtai.github.com/Noun-Space/
There's mobile support.

The code is at:
https://github.com/pajtai/Noun-Space

The game play needs some work, but I just wanted to get something working.

Suboptimal SpriteSheet code

I was looking through the Jaws code to see how it worked when I noticed that you store sprites as canvas elements.

Curious, I wrote a quick test to see what sort of performance each type of drawImage will get, and here are the results. As you can see, canvas is by far the worst performer. The BlobURL method seem to work very well in Chrome, but createObjectURL isn't compatible with all browsers.

If compatibility doesn't matter as much as speed, you might want to switch to using createObjectURL. Otherwise, data: URLs are still looking good.

After that, I thought it might be good to look into the performance difference of pre-cutting spritesheets as opposed to just leaving them one image and using drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh) to pick out pieces of them at blit-time. Here's that test which seems to indicate that it doesn't matter which you use. Since both are the same speed, I would go with the dynamic lift as it doesn't take up extra memory for all the individual sprites, it only needs a reference to the existing spritesheet image asset.

handleKeyUp and handleKeyDown are not passing the key

I expected those two to pass what key has been pressed. In my case I want to handle all the numbers and need the exact key to be passed.

  jaws.on_keydown(['0', '1', '2', '3', '4'], function(key) { alert(key) } )

About the viewport bound

Hello, I'm trying to use jaws to make a game,
and I want scroll the screen when player leave.

I use "viewport.isInside(player)" to do this, but here has some problem.

It is a board game, one step is 32px, and my screen size is 320x320(10x10 square on screen), viewport's height & width is 320 too, x & y range is 0~319 from top left corner.
When player is on (320,y) or (x,320), the 11st square, it is totally leave the screen but viewport still think player is inside the viewport.

This may because min of x & y is 0, and min of height & width is 1?

Last, I have one more question, why you made "jaws.cutImage (image, x, y, width, height)" as private?
I think this is a useful function :P

Thanks!

Documentation download

Hi ippa. Nice engine, man. I like the fact that every method is documented. I was just wondering whether the documentation is available for download. There's a Ruby build script, I understand, but from what I can tell it's for development on your end. The speed of offline documentation is noticable and saves you bandwidth, too.

Thanks, and good luck with your next Ludum Dare!

nevermind

nevermind... wrong Jaws...

Uses much memory?

HI,

First, you really did a great work!

I found example12 uses much memory in Safari(>460M) or Firefox (About 700M), but it only uses about 200M in Chrome. That's hard to run it on my mobile. So, would you please check if the memory usage could be reduced? (My PC testing environment is Mac OS Lion).

Tilesets instead of individual images

Just like the title states, is there a way this can be accomplished with the current JawsJS framework? Are there any plans to release something similar to this? It would make use of the tilemap a class a lot easier. I don't like having to specify each tile as an image.

Sprite.image

Changing the image of my sprite via:

my_sprite.image = "hello.png";

sprite.image is not working, I get "TypeError" on jaws.js.

my_sprite.setImage ("hello.png");

However, doing sprite.setImage ("new_image.png") is working.

Feature request: tilemap ROW and COL returned

It would be very helpful for collision detection etc if each sprite returned by the tile_map.atRect etc functions had an additional rect returned: tilemaprect. So we could know .tilemaptop, left, bottom, right, tilemapCOL, tilemapROW.

Why? I store all pickups in a platormer in the tilemap for speed (rendering AND collision). Then you hit a coin, you can't remove it from the tilemap without first CALCULATING which tilemap tile was returned via the sprite's x,y. Then you have to SEARCH the array at the tilemap[row][col][] you calculated to find the sprite in question if there are more than one. All this just to remove a coin from the tilemap.

Essentially I'd love a "this is the tilemap you hit" data to make accessing (changing) the tilemap more intuitive.

P.S. YOU ROCK! Forgive all the requests - I know you're busy. Just an idea you may want to consider for a "someday" upgrade.

Sprite.setImage doesn't take into account scale_image

Currently, when using setImage with a Sprite, it will ignore any previous set scale_x, scale_y, or scale_image properties. I can't decide if this is an issue or not with setImage. However, if it is not, then should setScale be included in Sprite?

sprite = new jaws.Sprite({image: "path/initial image", scale_image: number});

Basically, should it be:

sprite.setImage("path/new image"); //Internal scaling

or:

sprite.setImage("path/new image");
sprite.setScale(number);

or even:

sprite.setImage(jaws.gfx.retroScaleImage("path/new image"), sprite.scale);

No functions for mouse bindings(?)

Hi, I really liked the examples and the simple documentation provided for this js game library, but I couldn't seem to find any subject regarding mouse bindings.
In the game I intend to make I want to make it react on mouse events, both when clicking and moving the mouse.
How would I go about doing this?

Thanks in advance.

basic basic problem

Just beginning to tinker with jawsjs and... Cannot read property width of undefined.

red_bubble_spritesheet = new jaws.SpriteSheet({image: "img/red-bubble.png", frame_size: [40,40] });

Straight out of the engine constructors example.
Yes the image exists.

Cannot load .bmp on chrome?

Hi, I noticed that in example 8 you used an image called block.bmp.

The example is working if I opened it at your page but when I downloaded the files and opened locally, It always stuck at 50%.
It works fine on firefox but stuck at chrome.

Also if I uncomment either one or both of these lines, the robot won't move
// uncomment to show bounding box rects
// blocks.forEach( function(item, total) { item.rect.draw() })
// player.rect.draw()

setupInput()
assets.loadAll()
#50%: droid_11x15.png

(dunno why the text suddenly become larger)

numpad0 keycode missing

In input.js line 75:var numpadkeys = ["numpad1","numpad2","numpad3","numpad4","numpad5","numpad6","numpad7","numpad8","numpad9"]

This make numpad1(keycode:97) actually trigger by the numpad0(keycode:96), I think here should add "numpad0" at first.

Because in input.js line 81:for(var i = 0; numpadkeys[i]; i++) { k[96+i] = numpadkeys[i] }
This is start from keycode 96, where is numpad0's keycode.

Thanks!

jaws.Assets() Arrays vs. Objects

I've been looking at the source for jaws.Assets and noticed that, although the "loaded", "loading" and "data" properties of the Assets() instance are defined as Arrays, they seem to be treated as Objects (i.e. "associative arrays" rather than indexed numerically).

My questions are:

What is the rationale behind defining these as Arrays rather than plain Objects/hashes? Are there any advantages to doing it this way?
When using multiple instances of jaws.Assets(), I've had trouble getting my onload() handlers to fire (when passed in as an option to loadAll()). Does anyone else have experience with using multiple instances of the assets loader?

Mouse down event

I'd like a "if jaws.mouse_down() { }" function, that I can call from update function.

Thank you!

Possible Memory Leak

This is not a very detailed bug report but I thought you may find this interesting. I had one of the demos open in my browser (example3 i believe) all night and in the morning noticed the FPS had dropped to 12. Sorry that I don't have more details but I thought it may at least be a heads up that there could be a memory issue.

P.S. I really like our engine. I've been toying with the idea of creating games for a while now and being a javascript developer, wanted to find a good js game engine. I appreciate that you've honored pure javascript and idiomatic constructs. So many people try to bastardize js into something it's not. I can see you've put a lot of thought into the API. Nice work, excited to see this engine mature.

Sprite custom anchor points

I believe you intended for custom sprite anchor points at one time but it doesn't appear the code is working.

lines 1145 and 1146 in jaws.js have the following:

if(!options.anchor_x == undefined) this.anchor_x = options.anchor_x;
if(!options.anchor_y == undefined) this.anchor_y = options.anchor_y;

The following code doesn't seem to work without modification:

ttop = new jaws.Sprite({'image':'images/tanktop.png', x:100, y:100, 'anchor_x':0.5, 'anchor_y':0.75});

Opinion: Best way to structure larger games.

Hey,

I couldn't figure out a better place to get in contact with you to ask your opinion on this so I figured a github issue would have to do.

After getting a few demos up and running. I'm thinking about attempting a slightly larger project and before I dive in entirely, I wanted to get your thoughts on structure. I hate large monolithic files (I blame rails for this) and would like to split my code up as much as possible, but I continue to run into issues with scope. I've read up on some basic OOP and loose augmentation with js files.

I'm going for a directory structure where gamestates and classes have their own directory and are called from game.js

Any input would be great.

Thanks

jaws.Parallax.add_layer use jaws.Parallax.prototype.default_options.layers

Hello, I'm new with jaws.js and I love it. I just found something here, not sure if it's me or a real bug.

// in the menu GameState
var para1 = new jaws.Parallax({});
para1.addLayer({image: "image1.png", damping: 1});
para1.addLayer({image: "image2.png", damping: 2});
console.log(para1.layers.length); // 2

// in another GameState
var para2 = new jaws.Parallax({});
para2.addLayer({image: "image3.png", damping: 3});
console.log(para2.layers.length); // 3, should be 1 right?

It make the parallax from the menu gamestate visible in the gamescene gamestate.
A good workaround is to not use that function but the constructor instead:

var para1 = new jaws.Parallax({
   layers: [
      new jaws.ParallaxLayer({image: "image1.png", damping: 1}),
      new jaws.ParallaxLayer({image: "image2.png", damping: 2})
  ]
});

Private object variables accessible from outside.

Hi ippa, here are a few things I noticed. I could open new issues for each if you want.

Private variables
Assigning to a rect's x/y does not alter right/bottom. This creates problems like tile_map.atRect(rect) not working due to right/bottom being off. I imagine x/y are supposed to be private. Is it possible for jaws' current design to accomodate private object member variables?

I worked around it by calling moveTo() every update() with the rect's current x/y.

Jumping mid air after walking off a ledge
Example 9 (the side scrolling platformer) uses the can_jump variable, which is assigned true when the player collides with the ground. The player is therefore able to jump in midair after falling from a ledge, because can_jump is still true.

I added a feet_rect under the player that "attaches" to his feet. I then added a canJump() function to check if the feet_rect is colliding with something. So the player only jumps when his feet are in contact with something.

player.canJump = function() {
  var collided_block = tile_map.atRect(feet_rect)[0];

  if (collided_block) {
    return true;
  }
}

// in the update function:
//if(jaws.pressed("up"))    { if(player.can_jump) { player.vy = -10; player.can_jump = false } }

if (jaws.pressed("up")) {
  if (player.canJump()) {
    player.vy = -10;
  }
}

Jaws side scrolling platformer example 9 "fixed"

Example 9 JavaScript gist "fixed"

Rect.js function parameters
Rect.js uses raw function parameters instead of an option object like most of the other classes. I'm not sure why this is the case.

Examples index.html
Being able to navigate the examples would be convenient. Maybe a link back to the index from each example, or even a table of contents.

Offline development
Chrome offline development is hairy due to XSS. Firefox 11 is happy to run them offline though. I'm not sure what can be done about this besides informing devs how to work around the inconvenience.

Tell me if anything is unclear or if you need more info. If none of these are of concern then I'll leave them be.

Thanks!

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

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?

number keycodes offset by 1

Line 60 of src/input.js """var numbers = ["1","2","3","4","5","6","7","8","9"]""" I think because of the missing 0, all the codes are off by 1. For example, pressing "0" triggers the event for 1, and pressing "2" tiggers 1's event.

Finally, brilliant library, really simplifies sprite and asset management.

Question: how to use jaws.Text?

I'm trying to use jaws.Text, but I cannot make it work and cannot find any example on how to use it :(

Here's what I've tried so far (here's the jsfiddle)

var text;

function setup() {
    text = new jaws.Text({text: "Hello World", x: 10, y:10});
}

function draw() {
    jaws.clear();
    text.draw();
}

jaws.start();

What am I doing wrong? Thanks! :)

ParallaxLayer.x and .y don't do anything

When ParallaxLayer.x and ParallaxLayer.y are assigned on layer creation, they seem to have no effect on the layer's positioning on the canvas when drawn. Instead, I've had to bruteforce it by adding a constant onto the camera_x and camera_y.

This is based simply on my assumption of how ParallaxLayer.x and ParallaxLayer.y are supposed to act--this may be entirely incorrect. In any case, the only way I could at all affect the layer positioning was by monkeying with line 1931 of jaws.js--setting that to either a constant changed the y positioning of the layer. However, I wasn't sure how the x and y were supposed to be computed, and therefore couldn't figure out how to fix the issue.

Would be nice to include a version number in jaws.js

Hi ippa, great library, just beginning to try it out.

It'd be nice to include a version number either in the comments or as a property in jaws.js, so that it's easy to track whether my copy is the newest or not.

Sorry if I missed it (please point it out in that case)

Also git tags per release would be great.

Question: viewport y

I can't seem to get a viewport to render only on the bottom part of the canvas. I can get it to render on only the top part just fine.
canvas size is 500,320

// render top half - works
viewport_top = new jaws.Viewport({max_x: width*32, max_y: height*32, height:160 })
//expected this to render to the  bottom half of the canvas
viewport_bottom = new jaws.Viewport({max_x: width*32, max_y: height*32, height:160, y: 160 })

invalid asset path is repeatedly retried

If I call "jaws.assets.add()" with a string argument representing an invalid asset path, then that path is attempted to be fetched each time it is referenced in a jaws.Sprite constructor. This leads to massive slowdown (and lots of network traffic) if there are thousands of sprites that use this invalid asset path.

I would prefer an invalid asset is not attempted to be retrieved once it fails to be retrieved the first time. Also, an exception or even a console error would be nice as soon as the asset is deemed invalid.

Tilemap is looking for length.

/jawsjs/src/tile_map.js:62 Uncaught TypeError: Cannot read property 'length' of undefined

I believe both examples 12 and 8 are now broken.
http://jawsjs.com/jawsjs/examples/example12.html

is this from the spritelist rewrite?

undocumented methods in sprite_list.js

it's not documented that the jaws.SpriteList inherits all of the methods of Array.

would this be fixed by:
@Augments Array

sprite.rect() X and Y NaN

Hi,

I'm trying to make a game using jawsJs, which is really helpful.
I found a weird comportement, trying to detect collision between a sprite and a tile block.
when i use a statement as :

if(tile_map.atRect(sprite.rect()).length > 0) { 
...;
}

the test was always false.
I made a console.log(sprite.rect()); and sees that X and Y properties of the rect were "NaN".
then a console.log(sprite); shows that the "offset"properties are false either (NaN also)

When i initialise my sprite, i declare the offsets

            var sprite = new jaws.Sprite({anchor: "center center", x: x, y: y});
                        (......other sprite properties...)
            sprite.setImage( sprite.anim_default.next() );
            sprite.left_offset = 0;
            sprite.right_offset = 0;
            sprite.top_offset = 0;
            sprite.bottom_offset = 0;

It seems sprite.move() change the offsets to NaN

i have to re-declare the 4 offsets as shown before, to have the collision detected correctly.

Anyway, i first started a Html5 game from scratch.. it's much easier with JawsJs.. thanks && keep up !

method 'saved' of undefined

var bubbles = new _bubbles();

$(document).ready(function() {
    var context = $('#canvas')[0].getContext("2d");
    jaws.assets.add(["img/red-bubble.png","img/yellow-bubble.png","img/blue-bubble.png","img/purple-bubble.png","img/green-bubble.png","img/black-bubble.png"]);
    jaws.start(GameState);
});

function GameState() {
    this.setup = function(){
        bubbles.loadAllAnimations();
        bubble_spritelist = jaws.SpriteList();
        bubble_spritelist.push(bubbles.red.sprite);
    }
    this.update = function() {
        bubbles.red.sprite.setImage(bubbles.red.animation.next());
    }
    this.draw = function() {
        jaws.clear();
        bubble_spritelist.draw();
    }
}

function _bubbles(){
    this.red = { sprite: new jaws.Sprite({ x:0, y:0 }), animation: [] };
    this.yellow = { sprite: new jaws.Sprite({ x:0, y:0 }), animation: [] };
    this.blue = { sprite: new jaws.Sprite({ x:0, y:0 }), animation: [] };
    this.green = { sprite: new jaws.Sprite({ x:0, y:0 }), animation: [] };
    this.purple = { sprite: new jaws.Sprite({ x:0, y:0 }), animation: [] };
    this.black = { sprite: new jaws.Sprite({ x:0, y:0 }), animation: [] };
}

_bubbles.prototype.loadAllAnimations = function(){
    bubbles.red.animation = bubbles.loadAnimation("red");;
    bubbles.yellow.animation = bubbles.loadAnimation("yellow");
    bubbles.blue.animation = bubbles.loadAnimation("blue");
    bubbles.green.animation = bubbles.loadAnimation("green");
    bubbles.purple.animation = bubbles.loadAnimation("purple");
    bubbles.black.animation = bubbles.loadAnimation("black");
}
_bubbles.prototype.loadAnimation = function(color){
    return new jaws.Animation({sprite_sheet: "img/"+color+"-bubble.png", frame_size: [40,40], frame_duration: 100});
}

Parallax.draw doesn't work correctly and is slow.

The Parallax drawing code contains two bugs:

It doesn't work correctly with a vertically scrolling parallax (http://mooses.nl/misc/jaws/bug1/orig/)
It draws way too many sprites when the camera X and/or Y coordinates have a high value.
(in fact, all sprites between the top-left corner of the game world and the current camera position are drawn!)

I've squashed both bugs in my fork of jaws (see https://github.com/jorisvddonk/jaws/blob/master/src/parallax.js)
Unfortunately, I didn't get around to adding in proper support for options.repeat_x, options.repeat_y and options.scale.

jaws bug?

Hi I'm new in html 5. I'm actually new in game development.

I noticed that when the player is moving, if you change the browser tab or opening something that make the page suddenly lose focus, when you get back to the page, the player will keep moving and hard to be stopped.

In this page http://jawsjs.com/jawsjs/examples/example3.html
if you move left(keep pressing left arrow), then suddenly change to other tab and got back to the example tab, you'll notice that the robot will keep moving to the left.

ippa / jaws Goto Github PK

jaws's People

Contributors

Stargazers

Watchers

Forkers

jaws's Issues

Recommend Projects

Recommend Topics

Recommend Org