http://overlap2d.com/making-physics-based-side-scroller-part-2-adding-animated-character-that-moves/
Platformer with a Player
Good morning everyone, and as you probably guess in this tutorial we are going to continue where we left before in developing our physics based small platformer. Assuming you have already gone though Part 1 of the tutorial, you have a working project with an overlap2d scene loaded and proper physics shapes set to the platforms. Next step as you see from the picture above is to add a playable character!
In this tutorial we are going to:
- Import a sprite animation
- Re-group our scene a bit
- Pseudo Physics
- Create a PlayerController script
- Implement player moving
- Implement player jumping
- Create fake gravity
- Do some ray-casting for falling collision
Importing Sprite Animation
I am using a sprite animation of a sheep, that you can download here (Or you can use your own), it is basically several png images with same name and a number of frame at the end. You can import them as a sprite animation directly to the oevrlap2d, just go to import dialog, and then choose sprite animations (make sure not to mistake with spine animations). Then locate animation images and select them all together, and then import. A nice Cute sheep will appear in the right middle panel under other assets.
Put it on the stage. Then right Click on it and choose convert to composite item. This is required because we are planning to attach script to the player, and you can only attach a script to a composite item. Besides later we may put other components inside player to combine with animation. When you click on the animation and it get’s selected in it’s bound box, you can see that animation is slightly off from the bottom, legs are a bit up. Assuming we do not want sheep to be floating in the air, lets get inside the composite item we just created by double clicking on it, and lower the sheep animation few pixels down so legs will touch the bottom bound. While you are inside the composite it is good idea to give animation an ID for later use. this is done from the basic properties panel on top right, choose a unique id like “animation”. Then get one level up from the composite item to the root scene by double clicking on an empty area.
Lastly you need to give an id to the main player composite item as well. I decided to go with “player”
Save your scene, and then export it by clicking Ctrl+E
Re-grouping the scene
In this tutorial we will be handling simple movements like left and right and jumping. There will be no movements on angles, so please remove all the platforms on the scene that are rotated, and leave only horizontal ones, as well as the ground platform, save and export when done. Also remove any dynamic bodies from previous tutorial, we won’t be needing them today. If you run the application now you should see the sheep walking in the air.
Pseudo Physics
There are several approaches on how to move a character inside the platformer. The most simple one is make it a dynamic physics body, and then just apply different forces to it to move. This is good when you need a complex things like you see in Limbo, but you also will have to spend a lot of time in tweaking your physics configuration. On the other hand in games like Super Mario Bros, you can see that character behaves in rather unrealistic ways like stops instantly like there is no inertia and things like that. In this tutorial we are going to explore the second option. To achieve that type of effect, you do not need physics, it should be just a simple code, very light math and collision detection with the world. Luckily for us, we already have a physics world with shapes set up, so we do not need to worry about doing collisions, as we have a ray-casting for that matter. Ray casting is a technique to detect nearby body fixtures. you specify the vector of your ray (point from and point to) and if that vector intersects any of the world fixtures you will get the intersection points. This way if we cast a ray from the bottom of the player we would be able to detect platforms under the character and stop the falling process. Sounds simple? Let’s get to it.
Creating PlayerController script
Our sheep will be controlled by an IScript that we are going to attach to our “player” composite item. This class will handle everything from starting stopping animations, handling input events, simulating pseudo physics and so on. Go ahead and create that class, and implement IScript interface from the runtime. So you would be able to attach that script to a composite item later.
The init method is getting composite item in effect, and the act method is called every frame. Make sure to write a constructor that gets GameStage reference and stores it so we can use it later to get the world and do some ray-casting:
In the init method store the item for later access from the act. Besides that inside the init method we can retrieve our animation by id we gave earlier, pause the animation by default and set the origin coordinates for our player for better rotation/scaling.
Perfect, Go ahead and attach that script to the player composite item from our GameStage like this:
Now when you run the application it should compile normally and sheep should not move as the animation is paused. Next step is to listen for key input and move sheep left or right. We do not need any fancy speed calculation techniques here, to have acceleration or deceleration or things like that. It’ls a lot more simpler if A or D keys are pressed we move with constant speed, and if not then player just stays as is. You can either add input listener to the stage or just in act method of player script check for input, as libGDX provides us with that. Here is how:
In this code snipped we also scale X to -1 when moving left so the sheep will be looking in the direction it walks to. And we start and stop animation based on our knowledge if player walks or not.
Create fake gravity
You can run the game and move player left or right. Next step is to add pseudo gravity so sheep wall fall down, and jumping so sheep wall jump up! You will need to have a variable to keep current vertical speed, and change it on each frame according to gravity value (not necessarily the real gravity of our set up physics world). When jumped (space pressed) we will immediately make out vertical velocity to be a high value, and then on each frame (act) change our Y coordinate by value of vertical velocity.
Also add this class variables
You can try this out and jump around, fall and go up, should be fun, but no platform collisions yet, so let’s get to it.
Ray Casting and Collision with ground
First of all let’s implement a method that does the ray-casting, and if a collision is there stops the player from falling further.
just call that method every time in act before we move the object by Y coordinate, and now player should fall firmly on the ground and not fall through it.
Final Result
What is remaining is to make some coding to prevent jumping in the air so jump only on the ground, here is the final PlayerController.java class
Run the application, jump around and have fun! Compose your level so it will have platforms put in a way so you can reach unreachable areas and so on.
What can be done better?
I was curious on what you guys think could be done better, as I am too new to the box2d thing. So any suggestions are a lot welcome. Here are my highlights/questions:
- We cast just one ray from the middle, meaning player should stay on platform with it’s middle part, which is bad, should we cast 3 rays instead?
- The Box2D seems to be not giving immediate result for ray casting but provides handler, that means that theoretically we can go through object and then come back. Any better solution?
- I was thinking how to move on angled objects, it seems that the best idea is to cast ray from the middle of player by Y coordinate, so it will not get under the object when moving left/right
- For some reason sometimes randomly box2d crashes without an error, do you guys have it? any ideas on how to do it better?
Please leave all your comments/questinos/suggestions in questions in the forums here: http://overlap2d.com/forums/topic/making-physics-based-side-scroller-tutorial-series/
If you find a bug here, let me know too!
Have fun coding this, and make something cool please :))
相关推荐
虚拟虚拟卷轴 快速滚动任意数量的数据| |赞助商目录安装npm install --save vue-virtual-scroller :warning: 现在, vue-virtual-scroller使用在显示时自动刷新自身,以防止显示故障。 这意味着您需要包括vue-...
Michael van Dyk 的 2D-Side-Scroller这是什么? 这只是我正在做的一个项目。 它基于我在 12 年级做的一个项目,代码丢失了,所以我没有参考。
多人无限 2-D-Side-Scroller : Horae 的重装步兵密苏里州立大学 2015 年Spring软件工程小组项目Horae 的重装步兵是什么? 2D Infinite Sidescroller 多人网页浏览器游戏......真是一口。 古代神话主题,特别关注季节...
从angular2-virtual-scroll重命名为ngx-virtual-scroller 。 请更新您的package.json 关于 此模块显示一小部分记录,恰好足以填充视口,并使用与用户滚动相同的DOM元素。 此方法之所以有效,是因为DOM元素的数量始终...
安装npm install react-infinite-scroller --saveyarn add react-infinite-scroller如何使用import InfiniteScroll from 'react-infinite-scroller' ;窗口滚动事件< InfiniteScroll pageStart = { 0 } loadMore =...
vue-scroller移动端下拉加载组件 vue-scroller移动端下拉加载组件 vue-scroller移动端下拉加载组件
MODE-2-Vertical-Scroller:橡子电子的垂直滚动演示
npm install --save react-full-page-scroller 演示版 用法 import React , { Component } from 'react' import MyComponent from 'react-full-page-scroller' import 'react-full-page-scroller/dist/index.css' ...
安装$ npm install priority - nav - scroller -- save - dev用法导入JS 该脚本是ES6(ES2015)模块,但编译后的版本作为“ src / scripts / priority-nav-scroller-umd.js”包含在构建中。 如果您的构建过程可以...
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器,用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
npm install --save custom-react-scroller 截图示例 道具 rightIcon :根据需要渲染正确的图标组件。 (可选的) leftIcon :根据需要渲染左侧图标组件。 (可选的) 用法 import React from 'react' import ...
插件名称:Chayon-Shaah-Background-Parallax-Scroller 插件作者:Chayon Shaah 插件Verson:1.0 网址: : 说明:这是一个不错的轻量级固定背景视差滚动器jquery插件,由孟加拉国Chayon Shaah Mymensingh开发...
npm i vue-scroller 2 引入 import Vue from 'vue' import VueScroller from 'vue-scroller' Vue.use(VueScroller) 3 使用 1)添加上拉加载方法和下拉刷新方法 2)加载完成调用 相应的方法结束动画,不然的话会一直...
vue-virtual-scroller让拥有任何数据量的页面都能平滑滚动
import ReactPageScroller from 'react-page-scroller'; 示例在demo / src中。 特性 财产 类型 描述 默认值 animationTimer 数字 动画持续时间(以毫秒为单位) 1000 animationTimerBuffer 数字 动画缓冲时间 ...
安装yarn add react-custom-scroller好处极其轻巧(压缩后不到2KB)。 它使用本机滚动事件,因此所有事件都可以正常工作(鼠标滚轮,空格,向下翻页,向上翻页,箭头等)。 没有其他第三方依赖。 表现极好!用法...
@ zestia / ember-simple-infinite-scroller 这个Ember插件提供了一个简单的组件,该组件在滚动到底部时都会触发动作。 允许您加载更多数据。 它没有像其他无限滚动实现那样与Ember-Data耦合。 安装 ember install ...
QT实现无限滚动(infinite scroll)参考代码,下载自:https://github.com/vaidotasstrazdas/qt-infinite-scroller-demo
Side-Scroller
安装说明: git pull 或克隆 repo 在 cmd 提示符下,导航到项目文件夹的根目录运行以下命令A) npm 安装 -note if your running linux/mac you'll need to do 'sudo npm install'B) 凉亭安装要测试从项目根目录运行的...