FireBlock快速入门指南
更新时间:2017-08-08 阅读:14777
目录
安装
浏览器需求
FireBlock 是纯浏览器应用,不用安装,只需浏览器或设备满足要求即可。
桌面机对浏览器版本的最小需求:
- Chrome 43
- Safari 8.4
- Firefox 38
- Edge 12
- IE 11 (IE 不遵循 Web 标准,某些特性,例如声音,可能不工作)
移动设备的要求:
- iPhone/iPad:iOS 8 或更高。
- Android:使用 Chrome for Android 浏览器,而不是系统自带。
初次打开
在浏览器里打下如下链接:
http://fireblock.t-firefly.com
或直接:
http://fb.t-firefly.com
即可打开 FireBlock:
设定语言
选择 “Language…”,弹出语言列表菜单:
选择“简体中文”,用户界面和程序块就切换成简体中文显示:
调整程序块大小
如果觉得程序块太小,文字看不清楚或不易拖放,可以在选择菜单里选择“放大程序块”:
系统弹出放大程序块对话框:
拖动滑动或直接输入数字均可调整放大系数,一般设置成 1.2 ~ 1.5 就足够。太大的放大系数会导致程序块显示被截断。
点击“确认”,系统会放大程序块和其它按钮的显示,方便在触摸操作的平板电脑上操作。
上手指南
基本概念
FireBlock 相当于一个舞台剧,里面有舞台(Stage),舞台上有一个或多个角色(Sprite),角色可以在舞台上移动、说话(文字和声音)、演奏音乐、更换造型(Costume)、绘画涂鸦,与观众交互(鼠标、按键、文本输入),算术逻辑处理样样精通,更可以控制 FireDuino 板子与实体世界交互。角色的这些丰富的动作就是由程序块(Block)提供的。
用户就是导演(Director),负责角色的妆容,舞台的布置,角色的动作甚至剧情的发展等。
用户界面
整个用户界面,分为几下几个区域:
- 顶部是工具栏
- 左部是程序块分类和显示
- 中部是角色区,上面是角色的信息,下面是角色的脚本区、造型区和声音,通过标签页切换
- 右部,上面是舞台区,下面是舞台和角色列表
如下图所示:
工具栏
图标 | 说明 |
---|---|
文件菜单,在这里可以新建、打开或保存项目,导入或导出程序块等。 | |
云存储菜单,可以注册、登入和注销云存储服务。 | |
选项,有语言选择、放大程序块等功能。 | |
放大/缩小舞台区。 | |
舞台区切换最大化。 | |
旗帜按钮,指示程序的开始。 | |
/ | 暂停、恢复程序的执行。 |
停止程序的执行,不能恢复,只能重新开始。 |
程序块
程序块分为以下九大类:
程序块的颜色一般跟分类标签旁边的颜色一致,有利于辨认。例如所有的动作类程序块都是蓝色的:
角色区
角色区上面是显示当前角色及其旋转设置:
各图标解释如下:
图标 | 说明 |
---|---|
可旋转,角色可以自由旋转至任意角度。 | |
只面向左右,角色只能朝左或朝右(看当前的方向偏左还是偏右)。 | |
不旋转,角色固定显示,不能转向。 | |
角色名称,可以点击修改。 | |
勾上后,就可以用鼠标拖动角色放到舞台任意位置。 |
角色区下面可通过以下标签页切换脚本区、造型区和声音:
脚本区是放置程序块并拼接的地方,这是以下重点说明的地方。
舞台
舞台是角色显示和绘画的地方。一般的舞台宽为 480 像素,高为 360 像素。
舞台使用笛卡尔坐标系,水平为 X 轴(从 -240 到 240), 垂直为 Y 轴(从 -180 到 180),坐标系的方向如下:
另外角色的角度定义是,向上为 0 度,向右为 90 度,向下为 180 度,向左为 270 度或 -90 度,即角度是 Y 轴正方向的夹角,顺时针为正。
除非是严格的几何绘图,一般不了解坐标系也可以,只要记住角度是顺时针为正,向上为 0 度就足够了。
角色舞台列表
角色舞台列表列出当前角色及其造型,以及舞台的当前布景:
图标 | 说明 |
---|---|
添加小海龟角色。 | |
打开图像编辑器绘制新角色。 |
每个角色和舞台都有自己的造型和脚本,点击其对应的图标即可切换。
程序块的拖放和拼接
新增程序块有两种方法,一种方法是将程序块从分类显示区拖放至脚本区:
另一种是用鼠标右键点击脚本区上的原有的程序块,然后在弹出菜单中选择“复制”。
移除程序块很简单,把它拖回程序显示区,或在鼠标右键菜单中选择“删除”。
程序块的拼接也很方便,不同类型的程序块有不同的锯齿形状,首先确认它们可以无缝地拼在一起。
拖动程序块靠近另一程序块的下面,会出现白色磁条,这显示程序块的拼接位置,松开鼠标按钮后,新的程序块就跟原有的拼接在一起。如果形状不符,是不可能拼接在一起的。
如何将拼接的程序块解体呢?其实很简单,只要记住,鼠标拖动的程序块及其以下同级的程序块都会随之拖动,就像吸附在一起组成一个大程序块。
例如以下程序块组:
光拖动它是不行的,因为它及以下同级的程序块会一起拖动:
这时可以把它下面的所有程序块移走:
然后再移走真正需要移除的程序块:
再把原先的程序块拖回去:
猫捉老鼠游戏
下面演示如何创建一个猫捉老鼠的小游戏。
准备材料
将以下所需的程序块全部拖放到脚本区。注意,有可能需要拖动右侧灰长条形滚动条才能看到所需的程序块。
分类 | 程序块 |
---|---|
|
|
|
|
|
|
没错,用这些程序块就可以拼装成一个简单的小游戏了:
开始组装
得到:
得到:
得到:
得到:
⑦ 修改 里的语句。如果由于输入法支持的问题,不能在里面直接输入中文,请先在记事本写好中文并复制,然后点击文本框,删除掉原有的内容,再按”Ctrl-v”粘贴:
然后将其拼接到第 ⑥ 步的执行体里:
得到:
仔细观察一下, 的条件和执行体所需的程序块形状是不同的,也就是说,这有效地防止误放程序块,例如条件判断不可能放上一个“说话”的程序块,它们的形状不同,“说话”程序块本身也不提供真假判断。程序块形状的设计很巧妙地解决了匹配的问题。
得到最终结果:
好吧,赶快点击一下舞台上方的小旗帜 开始游戏吧,记得将鼠标放到舞台上移动。按 停止游戏:
程序块分析
让我们分析一下这个小游戏的程序块代码:
游戏流程其实很简单:
2. 重复执行以下代码
- a. 角色面向鼠标指针
- b. 在 1 秒时间内移动到鼠标指针处
- c. 判断是否碰到鼠标指针,如果是,则显示“我抓到你了^-^”
角色造型和布景
慢着,这个游戏不是猫捉老鼠(鼠标)吗?怎么变成海龟捉老鼠了。让我们将角色打扮一下,加入造型,并修改一下舞台的背景,让游戏名符其实。
首先在界面右下角的角色舞台列表点击海龟角色:
然后点击切换标签页的“造型”按钮,切换至造型区:
更换造型为三种选择:
2. 将本地图片拖放进来。
3. 使用系统自带的造型。
这里使用第 3 种方法,点击文件菜单:
选择 “造型...”菜单项:
然后选择 “Cat2”,小猫的造型就出来了:
空白的舞台也有点单调,如何更换呢?选择界面右下角的角色舞台列表中的 “Stage”:
然后点击切换标签页的“造型”按钮,切换至造型区:
跟角色的造型相同,布景的更换也有三种方法,以下采用系统自带的。
点击文件菜单:
选择“布景...”菜单项:
然后选择 “Bedroom 1”,布景就设置好了:
此时选择的是舞台,舞台也可以有自己的脚本,但一般不常用。我们还是切换回角色的脚本区吧,
点击界面右下角的角色舞台列表中的角色:
然后点击切换标签页的“脚本”按钮,切换至脚本区: