jaws/examples/example12.html at c203b2e467050dcbbf501bfa6e688517fd816813 · ippa/jaws · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="../jaws-dynamic.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>Jaws Example #12 - TileMap() and ViewPort()</title>
  </head>
<body>

  <canvas width=500 height=320></canvas>
  FPS: <span id="fps"></span>. Move with arrow keys.

  <div id="info">
    <h1>TileMap and ViewPort optimizations</h1>
    Here we have a Huge game world consisting of 700 x 700 tiles ( ~half a million sprites ).
    We don't want to draw them all so we use viewport.drawTileMap( tile_map )
  </div>

  <h3>jaws log</h3>
  <div id="jaws-log"></div>

  <script>
    function Example() {
      var player
      var blocks
      var fps
      var width = 700
      var height = 700
      var tile_map
      var viewport

      /* 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: "grass.png", x: i*32, y: i2*32}) )
          }
        }

        //blocks.push( new Sprite({image: "grass.png", x: 0, y: 0}) )
        viewport = new jaws.Viewport({max_x: width*32, max_y: height*32})

        // A tilemap, each cell is 32x32 pixels. There's 10 such cells across and 10 downwards.
        tile_map = new jaws.TileMap({size: [width, height], cell_size: [32,32]})

        // Fit all items in array blocks into correct cells in the tilemap
        // Later on we can look them up really fast (see player.move)
        tile_map.push(blocks)

        player = new jaws.Sprite({x:10, y:10, scale: 2, anchor: "center"})

        var anim = new jaws.Animation({sprite_sheet: "droid_11x15.png", frame_size: [11,15], frame_duration: 100})
        player.anim_default = anim.slice(0,5)
        player.anim_up = anim.slice(6,8)
        player.anim_down = anim.slice(8,10)
        player.anim_left = anim.slice(10,12)
        player.anim_right = anim.slice(12,14)

        player.setImage( player.anim_default.next() )
        jaws.preventDefaultKeys(["up", "down", "left", "right", "space"])
      }

      /* update() will get called each game tick with your specified FPS. Put game logic here. */
      this.update = function() {
        player.setImage( player.anim_default.next() )
        if(jaws.pressed("left"))  { player.move(-2,0);  player.setImage(player.anim_left.next()) }
        if(jaws.pressed("right")) { player.move(2,0);   player.setImage(player.anim_right.next()) }
        if(jaws.pressed("up"))    { player.move(0, -2); player.setImage(player.anim_up.next()) }
        if(jaws.pressed("down"))  { player.move(0, 2);  player.setImage(player.anim_down.next()) }

        viewport.centerAround(player)
        fps.innerHTML = jaws.game_loop.fps + ". player: " + player.x + "/" + player.y
      }

      /* Directly after each update draw() will be called. Put all your on-screen operations here. */
      this.draw = function() {
        jaws.clear()
        /*
        * blocks & tile_map  = ~500.000 sprites
        */

        // Slow
        // viewport.apply( function() { blocks.draw(); player.draw(); });

        // Faster:  checks if sprites are with within viewport before calling draw
        // viewport.draw( blocks )


        // Fastest: Use optimized viewport.drawTileMap() */
        viewport.drawTileMap( tile_map )
        viewport.draw( player )
      }
    }

    jaws.onload = function() {
      jaws.unpack()
      jaws.assets.add(["droid_11x15.png","block.bmp","grass.png"])
      jaws.start(Example)  // Our convenience function jaws.start() will load assets, call setup and loop update/draw in 60 FPS
    }
  </script>

</body>
</html>