Fireduino 开源创意平台 立即购买

拥有双核Cortex-M3处理器,集成高质量音频Codec和WiFi模组,拥有良好的IOT扩展性能,完美兼容Arduino IDE和Arduino标准接口,并支持FireBlock图形化编程软件,是一款首选的编程启蒙教学平台,更是一款开源的创意原型平台。

FireBlock快速入门指南

更新时间:2017-08-08 阅读:2047

安装

浏览器需求

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:

Fireblock quickstart startup.png


设定语言

首先点击顶部工具栏的选项按钮 Fireblock quickstart option button.png,打开选项菜单:

Fireblock quickstart option menu.png


选择 “Language…”,弹出语言列表菜单:

Fireblock quickstart option lang menu.png


选择“简体中文”,用户界面和程序块就切换成简体中文显示:

Fireblock quickstart startup zh.png


调整程序块大小

如果觉得程序块太小,文字看不清楚或不易拖放,可以在选择菜单里选择“放大程序块”:

Fireblock quickstart option menu zh.png


系统弹出放大程序块对话框:

Fireblock quickstart option zoom zh.png


拖动滑动或直接输入数字均可调整放大系数,一般设置成 1.2 ~ 1.5 就足够。太大的放大系数会导致程序块显示被截断。

点击“确认”,系统会放大程序块和其它按钮的显示,方便在触摸操作的平板电脑上操作。


上手指南

基本概念

FireBlock 相当于一个舞台剧,里面有舞台(Stage),舞台上有一个或多个角色(Sprite),角色可以在舞台上移动、说话(文字和声音)、演奏音乐、更换造型(Costume)、绘画涂鸦,与观众交互(鼠标、按键、文本输入),算术逻辑处理样样精通,更可以控制 FireDuino 板子与实体世界交互。角色的这些丰富的动作就是由程序块(Block)提供的。


用户就是导演(Director),负责角色的妆容,舞台的布置,角色的动作甚至剧情的发展等。


用户界面

整个用户界面,分为几下几个区域:

  • 顶部是工具栏
  • 左部是程序块分类和显示
  • 中部是角色区,上面是角色的信息,下面是角色的脚本区、造型区和声音,通过标签页切换
  • 右部,上面是舞台区,下面是舞台和角色列表


如下图所示:

Fireblock quickstart area zh.png


工具栏

图标 说明
Fireblock quickstart icon file.png 文件菜单,在这里可以新建、打开或保存项目,导入或导出程序块等。
Fireblock quickstart icon cloud.png 云存储菜单,可以注册、登入和注销云存储服务。
Fireblock quickstart icon option.png 选项,有语言选择、放大程序块等功能。
Fireblock quickstart icon zoom stage.png 放大/缩小舞台区。
Fireblock quickstart icon maximize stage.png 舞台区切换最大化。
Fireblock quickstart icon flag.png 旗帜按钮,指示程序的开始。
Fireblock quickstart icon pause.png/Fireblock quickstart icon resume.png 暂停、恢复程序的执行。
Fireblock quickstart icon stop.png 停止程序的执行,不能恢复,只能重新开始。


程序块

程序块分为以下九大类:

Fireblock quickstart block categories zh.png


程序块的颜色一般跟分类标签旁边的颜色一致,有利于辨认。例如所有的动作类程序块都是蓝色的:

Fireblock quickstart block motion zh.png


角色区

角色区上面是显示当前角色及其旋转设置:

Fireblock quickstart sprite rotate zh.png


各图标解释如下:

图标 说明
Fireblock quickstart icon rotate.png 可旋转,角色可以自由旋转至任意角度。
Fireblock quickstart icon leftright.png 只面向左右,角色只能朝左或朝右(看当前的方向偏左还是偏右)。
Fireblock quickstart icon no rotate.png 不旋转,角色固定显示,不能转向。
Fireblock quickstart icon sprite edit.png 角色名称,可以点击修改。
Fireblock quickstart icon dragable zh.png 勾上后,就可以用鼠标拖动角色放到舞台任意位置。


角色区下面可通过以下标签页切换脚本区、造型区和声音:

Fireblock quickstart icon tabbar zh.png


脚本区是放置程序块并拼接的地方,这是以下重点说明的地方。


舞台

舞台是角色显示和绘画的地方。一般的舞台宽为 480 像素,高为 360 像素。


舞台使用笛卡尔坐标系,水平为 X 轴(从 -240 到 240), 垂直为 Y 轴(从 -180 到 180),坐标系的方向如下:

Fireblock quickstart stage cord angle.png


另外角色的角度定义是,向上为 0 度,向右为 90 度,向下为 180 度,向左为 270 度或 -90 度,即角度是 Y 轴正方向的夹角,顺时针为正。

除非是严格的几何绘图,一般不了解坐标系也可以,只要记住角度是顺时针为正,向上为 0 度就足够了。


角色舞台列表

角色舞台列表列出当前角色及其造型,以及舞台的当前布景:

Fireblock quickstart sprite list.png


图标 说明
Fireblock quickstart icon new sprite.png 添加小海龟角色。
Fireblock quickstart icon paint sprite.png 打开图像编辑器绘制新角色。


每个角色和舞台都有自己的造型和脚本,点击其对应的图标即可切换。


程序块的拖放和拼接

新增程序块有两种方法,一种方法是将程序块从分类显示区拖放至脚本区:

Fireblock quickstart drag block zh.png


另一种是用鼠标右键点击脚本区上的原有的程序块,然后在弹出菜单中选择“复制”。

Fireblock quickstart dup block zh.png


移除程序块很简单,把它拖回程序显示区,或在鼠标右键菜单中选择“删除”。


程序块的拼接也很方便,不同类型的程序块有不同的锯齿形状,首先确认它们可以无缝地拼在一起。


拖动程序块靠近另一程序块的下面,会出现白色磁条,这显示程序块的拼接位置,松开鼠标按钮后,新的程序块就跟原有的拼接在一起。如果形状不符,是不可能拼接在一起的。

Fireblock quickstart combin block zh.png


如何将拼接的程序块解体呢?其实很简单,只要记住,鼠标拖动的程序块及其以下同级的程序块都会随之拖动,就像吸附在一起组成一个大程序块。


例如以下程序块组:

Fireblock quickstart split block 1 zh.png


现在需要移除 Fireblock quickstart split block 2 zh.png


光拖动它是不行的,因为它及以下同级的程序块会一起拖动:

Fireblock quickstart split block 3 zh.png


这时可以把它下面的所有程序块移走:

Fireblock quickstart split block 4 zh.png


然后再移走真正需要移除的程序块:

Fireblock quickstart split block 5 zh.png


再把原先的程序块拖回去:

Fireblock quickstart split block 6 zh.png


猫捉老鼠游戏

下面演示如何创建一个猫捉老鼠的小游戏。


准备材料

将以下所需的程序块全部拖放到脚本区。注意,有可能需要拖动右侧灰长条形滚动条才能看到所需的程序块。

分类 程序块
Fireblock quickstart cat control zh.png Fireblock quickstart block green flag zh.png

Fireblock quickstart block loop zh.png
Fireblock quickstart block if zh.png

Fireblock quickstart cat motion zh.png Fireblock quickstart block slide zh.png

Fireblock quickstart block face zh.png

Fireblock quickstart cat sense zh.png Fireblock quickstart block touch zh.png

Fireblock quickstart block mouse xy zh.png

Fireblock quickstart cat appearance zh.png Fireblock quickstart block say zh.png


没错,用这些程序块就可以拼装成一个简单的小游戏了:

Fireblock quickstart game parts zh.png

开始组装

① 将 Fireblock quickstart block loop zh.png 拖放到 Fireblock quickstart block green flag zh.png 下面:

Fireblock quickstart game step 1 zh.png


② 将 Fireblock quickstart block mouse xy zh.png 分别拼接到 Fireblock quickstart block slide zh.png 里面:

Fireblock quickstart game step 2 1 zh.png

Fireblock quickstart game step 2 2 zh.png


得到:

Fireblock quickstart game step 2 3 zh.png


③ 点击 Fireblock quickstart block face zh.png 里的下拉箭头,在弹出菜单里选择“鼠标指针”:

Fireblock quickstart game step 3 1 zh.png


得到:

Fireblock quickstart game step 3 2 zh.png


④ 按次序分别将 Fireblock quickstart game step 3 2 zh.pngFireblock quickstart game step 2 3 zh.png 放进 Fireblock quickstart block loop zh.png 里,得到:

Fireblock quickstart game step 4 zh.png


⑤ 点击 Fireblock quickstart block touch zh.png 里的下拉箭头,在弹出菜单里选择“鼠标指针”:

Fireblock quickstart game step 5 1 zh.png


得到:

Fireblock quickstart game step 5 2 zh.png


⑥ 将 Fireblock quickstart game step 5 2 zh.png 拼接到 Fireblock quickstart block if zh.png 里:

Fireblock quickstart game step 6 1 zh.png


得到:

Fireblock quickstart game step 6 2 zh.png


⑦ 修改 Fireblock quickstart block say zh.png 里的语句。如果由于输入法支持的问题,不能在里面直接输入中文,请先在记事本写好中文并复制,然后点击文本框,删除掉原有的内容,再按”Ctrl-v”粘贴:

Fireblock quickstart game step 7 1 zh.png


然后将其拼接到第 ⑥ 步的执行体里:

Fireblock quickstart game step 7 2 zh.png


得到:

Fireblock quickstart game step 7 3 zh.png


仔细观察一下,Fireblock quickstart block if zh.png 的条件和执行体所需的程序块形状是不同的,也就是说,这有效地防止误放程序块,例如条件判断不可能放上一个“说话”的程序块,它们的形状不同,“说话”程序块本身也不提供真假判断。程序块形状的设计很巧妙地解决了匹配的问题。


⑧ 将 Fireblock quickstart game step 7 3 zh.png 拼接到 Fireblock quickstart game step 4 zh.png 里:

Fireblock quickstart game step 8 1 zh.png


得到最终结果:

Fireblock quickstart game step 8 2 zh.png


好吧,赶快点击一下舞台上方的小旗帜 Fireblock quickstart icon flag.png 开始游戏吧,记得将鼠标放到舞台上移动。按 Fireblock quickstart icon stop.png 停止游戏:

Fireblock quickstart game result 1 zh.png


程序块分析

让我们分析一下这个小游戏的程序块代码:

Fireblock quickstart game step 8 2 zh.png


游戏流程其实很简单:

1. 当按 Fireblock quickstart icon flag.png 时开始运行本程序块组。

2. 重复执行以下代码

a. 角色面向鼠标指针
b. 在 1 秒时间内移动到鼠标指针处
c. 判断是否碰到鼠标指针,如果是,则显示“我抓到你了^-^”


角色造型和布景

慢着,这个游戏不是猫捉老鼠(鼠标)吗?怎么变成海龟捉老鼠了。让我们将角色打扮一下,加入造型,并修改一下舞台的背景,让游戏名符其实。


首先在界面右下角的角色舞台列表点击海龟角色:

Fireblock quickstart game costume 1.png


然后点击切换标签页的“造型”按钮,切换至造型区:

Fireblock quickstart icon tabbar zh.png

Fireblock quickstart game costume 2 zh.png


更换造型为三种选择:

1. 按 Fireblock quickstart icon paint sprite.png 调出图像编辑器,自己画一个造型,并设置旋转中心。

2. 将本地图片拖放进来。

3. 使用系统自带的造型。


这里使用第 3 种方法,点击文件菜单:

Fireblock quickstart file menu zh.png


选择 “造型...”菜单项:

Fireblock quickstart costume menu zh.png


然后选择 “Cat2”,小猫的造型就出来了:

Fireblock quickstart game costume 3 zh.png


空白的舞台也有点单调,如何更换呢?选择界面右下角的角色舞台列表中的 “Stage”:

Fireblock quickstart game costume 4 zh.png


然后点击切换标签页的“造型”按钮,切换至造型区:

Fireblock quickstart icon tabbar zh.png

Fireblock quickstart game costume 5 zh.png


跟角色的造型相同,布景的更换也有三种方法,以下采用系统自带的。


点击文件菜单:

Fireblock quickstart file menu background zh.png


选择“布景...”菜单项:

Fireblock quickstart backgrounds menu zh.png


然后选择 “Bedroom 1”,布景就设置好了:

Fireblock quickstart game costume 6 zh.png


此时选择的是舞台,舞台也可以有自己的脚本,但一般不常用。我们还是切换回角色的脚本区吧, 点击界面右下角的角色舞台列表中的角色:

Fireblock quickstart game costume 7.png


然后点击切换标签页的“脚本”按钮,切换至脚本区:

Fireblock quickstart icon tabbar zh.png

Fireblock quickstart game costume 8 zh.png


最后,我们按舞台上的 Fireblock quickstart icon maximize stage.png 按钮切换到大舞台,一起来玩猫捉老鼠的游戏吧:

Fireblock quickstart game result 2 zh.png