Permalink
Browse files

Big performance rework, better depth drawing and lights.

  • Loading branch information...
MalphasWats committed Feb 1, 2017
1 parent 8ea16a5 commit b857903911c771935b2f0335b12ab413687f7c8c
View
@@ -11,16 +11,13 @@ Currently includes basic support for:
* Scrolling viewport
* Tile map collision
* Keyboard controls
* Mouse controls
* Simple lighting
Still to do:
* Mouse & touch input
* Touch input
* Animated tiles
* SpriteBucket example
* Lots of stuff as I have ideas!
I also included an extra: SpriteBuckets, which allow very large numbers of sprites to
be drawn whilst keeping performance, best used in batches of ~500, tested with ~10000
sprites in total for reasonable performance.
* Make lighting blend better
Glixl has enough functionality at this stage to make simple games.
View
@@ -15,121 +15,129 @@
</style>
</head>
<body>
<canvas width="416" height="416" id="canvas"></canvas>
<canvas width="416" height="448" id="canvas"></canvas>
<p>Controls: A/D to walk left/right, W to jump. | <span id="fps"></span> fps. </p>
<script type="text/javascript" src="../glixl.js"></script>
<script type="text/javascript" src="../util.js"></script>
<script type="text/javascript" src="../glixl.Game.class.js"></script>
<script type="text/javascript" src="../glixl.Scene.class.js"></script>
<script type="text/javascript" src="../glixl.Sprite.class.js"></script>
<script type="text/javascript" src="../glixl.SpriteSheet.class.js"></script>
<script type="text/javascript" src="../glixl.Tile.class.js"></script>
<script type="text/javascript">
function Example()
{
var sprite;
var sprite_sheet, tile_sheet;
var tile_map;
this.init = function()
var Player = function(parameters)
{
parameters.speed = 128;
glixl.Sprite.call(this, parameters);
this.vx = 0;
this.vy = 0;
this.can_jump = true;
}
Player.prototype.update = function()
{
glixl.Sprite.prototype.update.call(this);
if (my_game.key_pressed("d"))
{
sprite_sheet = new glixl.SpriteSheet({src:'sprite.png', frame_size:[16, 16]})
tile_sheet = new glixl.SpriteSheet({src:'tiles.png', frame_size:[16, 16]})
tile_map = new glixl.TileMap({sprite_sheet: tile_sheet, dimensions: [26, 13, 2], scale:2});
for (var i=0 ; i<26 ; i++)
{
for (var j=0 ; j<13 ; j++)
{
if (i == 0 || i == 25 || j==0 || j==12)
tile_map.set_tile(i, j, new glixl.Tile({frame:1, collidable: true}));
else
tile_map.set_tile(i, j, new glixl.Tile({frame:2}));
}
}
tile_map.set_tile(5, 9, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(6, 9, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(7, 9, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(12, 9, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(13, 9, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(14, 9, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(17, 7, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(18, 7, new glixl.Tile({frame:1, collidable: true}));
tile_map.set_tile(19, 7, new glixl.Tile({frame:1, collidable: true}));
glixl.scene.set_active_tilemap(tile_map);
sprite = new glixl.Sprite( {sprite_sheet: sprite_sheet, x: 64-16, y: 96-16, z: 1, size:[16, 16], scale: 2} );
sprite.anims = {}
sprite.anims.walk_right = new glixl.Animation({frames:[12, 13, 14, 15, 16, 17], frame_duration:60});
sprite.anims.walk_left = new glixl.Animation({frames:[18, 19, 20, 21, 22, 23], frame_duration:60});
sprite.set_animation(sprite.anims.walk_right);
this.vx = 4;
this.set_animation('walk_right');
glixl.scene.add_sprite(sprite);
sprite.can_jump = true;
sprite.vx = 0;
sprite.vy = 0;
sprite.move = function()
{
this.x += this.vx;
if (tile_map.collide(this.x, this.y, 0))
{
this.x -= this.vx;
}
else
this.redraw = true;
this.vx = 0;
}
else if (my_game.key_pressed("a"))
{
this.vx = -4;
this.set_animation('walk_left');
}
else
{
this.set_animation('idle');
}
if (my_game.key_pressed("w") && this.can_jump)
{
this.can_jump = false;
this.vy = 15;
}
this.x += this.vx;
if (my_game.scene.collide(this))
{
this.x -= this.vx;
}
this.vx = 0;
this.y -= this.vy;
if (tile_map.collide(this.x, this.y+this.height, 0))
{
this.can_jump = true;
this.y += this.vy;
this.vy = 0;
}
else
this.redraw = true;
this.vy -= 1; //Gravity
if (this.vy < -10)
this.vy = -10;
}
this.y -= this.vy;
if (my_game.scene.collide(this))
{
this.can_jump = true;
this.y += this.vy;
this.vy = 0;
}
this.update = function()
{
if (glixl.key_pressed("d"))
{
sprite.vx = 4;
sprite.set_animation(sprite.anims.walk_right);
}
this.vy -= 1; //Gravity
if (this.vy < -10)
this.vy = -10;
my_game.scene.center_on(this);
}
extend(glixl.Sprite, Player);
var Example = function()
{
glixl.Game.call(this, {});
if (glixl.key_pressed("a"))
{
sprite.vx = -4;
sprite.set_animation(sprite.anims.walk_left);
}
if (glixl.key_pressed("w") && sprite.can_jump)
var sprite_sheet = new glixl.SpriteSheet({context: this.context, src: 'spritesheet.png', frame_size: [16, 16]});
var scene = new glixl.Scene({ context: this.context, width: this.width*2, height: this.height, sprite_sheet: sprite_sheet, tile_size: {width: 32, height: 32} });
for (var i=0 ; i<26 ; i++)
{
for (var j=0 ; j<13 ; j++)
{
sprite.can_jump = false;
sprite.vy = 15;
if (i == 0 || i == 25 || j==0 || j==12)
scene.add_tile(new glixl.Tile({frame:1, x:i*32, y:j*32+32, z:32, width:32, height:32}));
else
scene.add_tile(new glixl.Tile({frame:2, x:i*32, y:j*32, z:0, width:32, height:32}));
}
sprite.move();
glixl.scene.center_on(sprite);
document.getElementById('fps').innerHTML = glixl.fps;
}
scene.add_tile(new glixl.Tile({frame:1, x:5*32, y:10*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:6*32, y:10*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:7*32, y:10*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:12*32, y:10*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:13*32, y:10*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:14*32, y:10*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:17*32, y:8*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:18*32, y:8*32, z:32, width:32, height:32}));
scene.add_tile(new glixl.Tile({frame:1, x:19*32, y:8*32, z:32, width:32, height:32}));
var sprite = new Player({frame: 6, x: 64-16, y:96-16, z:32, width:32, height:32});
sprite.add_animation('walk_right', [18, 19, 20, 21, 22, 23], 60);
sprite.add_animation('walk_left', [24, 25, 26, 27, 28, 29], 60);
sprite.set_animation('idle'); // Default animation created by Sprite constructor
scene.add_sprite(sprite);
this.set_scene(scene);
}
Example.prototype.update = function()
{
document.getElementById('fps').innerHTML = this.fps;
}
extend(glixl.Game, Example);
glixl.start(Example);
my_game = new Example();
my_game.start();
</script>
</body>
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.

This file was deleted.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit b857903

Please sign in to comment.