本次教程的内容:主要介绍怎样通过踢踏编程(playteka)平台上的踢踏动画(playDraw)软件,创作弹球动画,弹球动画是球在画布内自由运行,当球自由运行碰撞到画布边缘时反弹。

  • 本次教程程序运行输出效果如下图所示:

QQ截图20160626115615


弹球操作说明:

1、创建项目:在浏览器地址栏中输入:app.playteka.com  ,输入用户名和密码进入到踢踏互动编程(playteka)平台,平台中选择踢踏动画(playDraw),在长条形编辑框中输入项目名后点击屏幕快照 2016-05-29 下午11.13.55创建一个项目。

2、创建画布:在“开始”模块中嵌入“创建画布”模块,画布使用系统默认的:类型2D(即二维图形)、和默认尺寸宽为640高为360 ;在“循环画”模块中嵌入“背景”模块,“背景”模块参数设置为125(是灰色),踢踏动画程序每次在循环处理时都会将背景涂改为灰色背景。

3、画一个位于画布中心的圆

  • 圆心坐标设置:将圆心坐标设置于画布中心位置,也就是画布宽度一半和画布高度一半的坐标位置;设置圆心坐标位置变量为(x,y),那么 x = 画布宽度 ÷ 2   、和 y = 画布高度 ÷ 2 ,x和y的初值化赋值模块代码(如下图所示)嵌入到“开始”模块中,作为程序初始化数据;

屏幕截图 2016-06-24 22.11.24

  • 圆心半径设置:设置圆半径变量为半径(注意:在踢踏动画软件中可以定义中文名字作为变量),那么半径=30屏幕截图 2016-06-24 22.10.56 ;将半径初值化赋值的踢踏动画软件代码嵌入到“开始”模块中;
  • 设置椭圆模式:在踢踏动画软件中的二维椭圆形默认高度和宽度是直径模式,因为本次创作中椭圆的高度和宽度设置的是半径,所以将编辑板->二维图形工具箱中的“椭圆形模式”模块屏幕截图 2016-06-24 22.10.36嵌入到“开始”模块中,并且选择“半径”模式作为程序初始化数据;
  • 画圆代码:通过“椭圆”模块屏幕截图 2016-06-24 22.12.26画圆,椭圆心坐标为(x,y),椭圆高度和宽度相同半径=30是个正圆;将“椭圆”模块嵌入到“循环画”模块中;

3、创建圆自由移动功能

  • 圆自由移动功能分析:圆能自由移动,需要知道这个圆的起始位置和移动速度;从以上操作步骤已知圆心起始坐标位置为(x,y)位于画布中心(注意:圆心位置也就是圆所在的位置),通过“循环画”模块每次在循环处理时都给圆心的X轴和Y轴坐标值加上移动速度,那么圆就会自由移动;
  • 设定圆的移动速度:设定X轴方向的移动速度变量为 X速度 = 2;设定Y轴方向的移动速度变量为 Y速度 = 2;将设置的X轴和Y轴移动速度模块代码(如下图所示)作为程序初始化数据嵌入到“开始”模块中;

屏幕截图 2016-06-24 22.11.39

  • 圆自由移动的计算方法:圆在X轴方向移动,通过“循环画”模块每次在循环处理时都给圆心的x坐标值累加上2(因为X速度=2),那么圆在X轴方向的移动计算方法是:x = x + X速度,当X速度 = 2为正数时,圆则向右方向移动,当X速度 = -2负数时,圆则向左方向移动;圆在Y轴方向移动,通过“循环画”模块每次在循环处理时都给圆心的y坐标值累加上2(因为Y速度=2),那么圆在Y轴方向的移动计算方法是:y = y + Y速度,当Y速度 = 2正数时,圆则向下方向移动,当Y速度 = -2负数时,圆则向上方向移动;

屏幕截图 2016-06-24 22.12.04

4、创建圆自由弹动功能

  • 圆自由反弹功能分析:经过以上步骤的创作发现圆自由移动后将超出画布的边缘,而不见踪迹;怎样能让圆碰撞到画布边缘后反弹,需要在“循环画”模块中增加圆是否碰撞到画布边缘的判断代码逻辑;
  • 设置圆移动碰撞到画布右侧边缘时反弹:当圆心X轴值加上圆半径大于并且等于画布宽度(即:x + 圆半径 ≥ 画布宽度)时,说明圆已碰撞到画布右侧边缘,则将X速度值改为-2(即:X速度 =  X速度 × -1),如果之前X轴的速度为2时,当前X速度则被改为-2,也就是将圆的X轴速度改为另外一个方向的速度,从而让圆反弹;

屏幕截图 2016-06-24 22.09.14

  • 设置圆移动碰撞到画布左侧边缘时反弹:当圆心X轴值减去圆半径小于并且等于0(即:x – 圆半径 ≤ 0)时,说明圆已碰撞到画布左侧边缘,则将X速度值改为2(即:X速度 =  X速度 × -1),如果之前X轴的速度为-2时,当前X速度则被改为2,也就是将圆的X轴速度改为另外一个方向的速度,从而让圆反弹;

屏幕截图 2016-06-24 22.09.33

  • 设置圆移动碰撞到画布下侧边缘时反弹:当圆心Y轴值加上圆半径大于并且等于画布高度(即:y + 圆半径 ≥ 画布高度)时,说明圆已碰撞到画布下侧边缘,则将Y速度值改为-2(即:Y速度 =  Y速度 × -1),如果之前Y轴的速度为2时,当前Y速度则被改为-2,也就是将圆的Y轴速度改为另外一个方向的速度,从而让圆反弹;

屏幕截图 2016-06-24 22.09.54

  • 设置圆移动碰撞到画布上侧边缘时反弹:当圆心Y轴值减去圆半径小于并且等于0(即:y – 圆半径 ≤ 0)时,说明圆已碰撞到画布上侧边缘,则将Y速度值改为2(即:Y速度 =  Y速度 × -1),如果之前Y轴的速度为-2时,当前Y速度则被改为2,也就是将圆的Y轴速度改为另外一个方向的速度,从而让圆反弹;

屏幕截图 2016-06-24 22.10.12


以下是本次踢踏动画创作教学视频: