craftyjs viewport misunderstanding

Question

Learning CraftyJS and I'm missing some info about how does viewports work. What I need: large horizontal map (platformer) and camera, following the hero. Is there any hints where to read detailed information, explaining how does it work? Thanks a lot!

P.S. Official CraftyJS API documentation doesn't helped me in that case

score 0 · Answer 1 · answered May 06 '17 at 17:07

Official CraftyJS API documentation doesn't helped me in that case

It's all there in this case, although distributed over several pages. Be sure to skim through the whole API to get a good overview of the available functionality.

What I need: large horizontal map (platformer)

See last example in Getting started.

What I need: ... camera, following the hero

Camera is referred to as Viewport in Crafty. See Crafty.viewport.follow()

Let me know if you have further questions.

Putting it all together:

Crafty.init();

Crafty.e('2D, DOM, Color, floor')
  .attr({x: -400, y: 250, w: 850, h: 10})
  .color('green');

var hero = Crafty.e('2D, DOM, Color, Twoway, Gravity')
  .attr({x: 0, y: 0, w: 50, h: 50})
  .color('#F00')
  .twoway(200)
  .gravity('floor');

Crafty.viewport.clampToEntities = false;
Crafty.viewport.follow(hero);

<script src="https://cdn.rawgit.com/craftyjs/Crafty/0.8.0/dist/crafty-min.js"></script>

craftyjs viewport misunderstanding

1 Answers1