CODEWITHSUNDEEP
javascriptcraftyjs
HungryCat
HungryCat

Reputation: 33

craftyjs viewport misunderstanding

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

Upvotes: 0

Views: 103

Answers (1)

mucaho
mucaho

Reputation: 2169

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>

Upvotes: 0

Related Questions