FireBlock Quickstart

来自Firefly wiki
跳转至: 导航搜索

Installation

Browser Requirement

FireBlock is a pure Web application. No installation is needed. It runs in a HTML5 web browser.


The minimum requirement of browser version for desktop PC:

  • Chrome 43
  • Safari 8.4
  • Firefox 38
  • Edge 12
  • IE 11 (IE doesn't follow Web standard,some features,such as voice,may not work)


Requirement of mobile devices:

  • iPhone/iPad: iOS 8 or later.
  • Android: Chrome browser for Android,instead of AOSP browser.


Startup

Enter the following link in the browser:

http://fireblock.t-firefly.com

or the short link:

http://fb.t-firefly.com

to open FireBlock:

Fireblock quickstart startup.png


Language Setting

First, click Fireblock quickstart option button.png button on the toolbar to open the option menu:

Fireblock quickstart option menu.png


Select "Language…", the language list menu popping up:

Fireblock quickstart option lang menu.png


You can select your favourite language here. For example, if you select"简体中文"(Simplified Chinese), user interface and the block is switched to Simplified Chinese immediately:

Fireblock quickstart startup zh.png


Zoom Blocks

If you feel that the blocks are too small to see or drag-and-drop, you can select "Zoom blocks..." in the option menu:

Fireblock quickstart option menu en.png


The zoom blocks dialog pops up:

Fireblock quickstart option zoom en.png


You can adjust the zoom factor by dragging the slider or entering the number directly. This factor is usually set to 1.2 ~ 1.5, which is sufficient for common use. If the factor is too large, the display of the block will be truncated.

Click "OK". The blocks and other buttons will zoom accordingly, which make the interaction handy especially on the touching tablet.


Start Guide

Basic Concept

FireBlock is equivalent to a stage play, where there are a Stage, one or more Sprites who can move,talk (text and voice),play music,change Costumes, paint, interact with the audience (mouse,keyboard,text input) and also do well in arithmetic logic processing. These versatile actions are controlled by the Blocks.


The user is the Director, who is in charge of Sprite Costumes, Stage Backgrounds, Sprite actions, and even the progress of the whole story.


User Interface

The entire user interface is divided into several area:

  • The top sits a toolbar.
  • The left is the blocks palette, including category and display.
  • The center is the detail view of sprite or stage. It contains two parts: the above is the sprite basic setting, and the below is the area of scrips, costumes, and sounds.
  • The right is the stage and sprite corral (icon list of sprites and stage)


As shown below:

Fireblock quickstart area en.png


Toolbar

Icon Description
Fireblock quickstart icon file.png File menu, where you can create, open or save the project,import or export blocks and so on.
Fireblock quickstart icon cloud.png Cloud menu, where you can register, login or logout the cloud storage service.
Fireblock quickstart icon option.png Option menu, where you can select language, zoom the blocks and modify stage size, etc.
Fireblock quickstart icon zoom stage.png Togle normal and half stage size.
Fireblock quickstart icon maximize stage.png Toggle normal and double stage size. With double stage, only the stage and some control icons are visible.
Fireblock quickstart icon flag.png green flag button, which is usualy used to send the message of starting execution of scripts.
Fireblock quickstart icon pause.png/Fireblock quickstart icon resume.png Pause or Resume the execution of the scripts.
Fireblock quickstart icon stop.png Stop the execution of scripts, which cannot be resumed.


Blocks

The blocks are classified into the following categories:

Fireblock quickstart block categories en.png


The color of the block is usually matched with the color label of the coresponding category.

It helps to identify the blocks. For example, the motions blocks are all blue:

Fireblock quickstart block motion en.png


Sprite Area

Top of the sprite area shows the current role information and its rotation setting:

Fireblock quickstart sprite rotate en.png


Here is the description of the icons:

Icon Description
Fireblock quickstart icon rotate.png Sprite can rotate freely to any angle.
Fireblock quickstart icon leftright.png Only face left or right. The sprite will only flip left or right according to its current direction.
Fireblock quickstart icon no rotate.png Don't rotate. The sprite is displayed as it is, without any rotation no matter what the current direction is.
Fireblock quickstart icon sprite edit.png Sprite name. You can click it to modify.
Fireblock quickstart icon dragable en.png If it is checed, you can drag the sprite anywhere on the stage.


You can switch scripts, costumes, and sounds tab page by the following tabbar:

Fireblock quickstart icon tabbar en.png


Scripting area is a place to build all the blocks together, which the emphasis of the following chapter.


Stage

Stage is the place where sprites are shown and painting. The normal stage has a size of 480 pixels in width and 360 pixels in height.


Stage uses the Cartesian coordinate system. X axis, ranged from -240 to 240, is horizontal, and Y axis, ranged from -180 to 180, is vertical. Both axis are depicted in the follow diagram:

Fireblock quickstart stage cord angle.png


In addition,the angle of sprite is defined as: up is 0 degree, right is 90 degree, down is 180 degree, left is 270 or -90 degree. That is, the angle is relative to positive Y axis, and increased in the clockwise direction.

Unless you are painting a serious geometrical drawings, knowing angel is usually enough: angle is 0 degree in the up direction, and increase clockwise.


Sprite Corral

Sprite corral list all icons of the sprites with their current costume, and stage with the current background.

Fireblock quickstart sprite list.png


Icon Descriptoin
Fireblock quickstart icon new sprite.png Add a new turtle sprite.
Fireblock quickstart icon paint sprite.png Open the image editor to draw a new sprite.


Every sprite and stage has its own costumes (backgrounds) and scripts. You can click the corresponding icon to switch between them.


Building Blocks

There are two ways to add blocks. One is to drag block from the palette and drop it to the scripting area:

Fireblock quickstart drag block en.png


Another is to right click the block on the scripting area, and select "duplicate" from the pop up menu.

Fireblock quickstart dup block en.png


Removing block is even simpler. Drag it back to the palette, or select "delete" in the popup menu with right mouse click.


Block building is simple. Every type of blocks has its own zigzag shap. We need to make sure they can fit together.


If you drag the block close enough to the other block, there will be a white stripe or circle indicating the insert point, where the block will be dropped to if you release the mouse butto, as if there is some magnetic attraction between them.

If the shapes of the blocks do not match, there is no white stripe or circle shown, and you are not able to join them together.

Fireblock quickstart combin block en.png


How to split the blocks? It is simple, just remeber one rule: the block you dragged, together with its following blocks, form a block group, which behaves like one big block.


Take the following blocks for example:

Fireblock quickstart split block 1 en.png


We need to remove Fireblock quickstart split block 2 en.png now.


It does not work just by trying to drag it out, because it and its following blocks are moving along:

Fireblock quickstart split block 3 en.png


So, you need to move its following blocks away first:

Fireblock quickstart split block 4 en.png


Then drag the block to the palette to remove that block:

Fireblock quickstart split block 5 en.png


Finally, add back the rest blocks:

Fireblock quickstart split block 6 en.png


Tom & Jerry Game

Here we show how to create the classic game, Tom and Jerry, i.e. cat catches mouse.


Blocks

Drag all the blocks needed to the scripting area. Please note, you may need to scroll the gray scroll bar on the right side to see the block.

Category Blocks
Fireblock quickstart cat control en.png Fireblock quickstart block green flag en.png

Fireblock quickstart block loop en.png
Fireblock quickstart block if en.png

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

Fireblock quickstart block face en.png

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

Fireblock quickstart block mouse xy en.png

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


Yes,all these blocks are enough to build this simple game:

Fireblock quickstart game parts en.png

Building

① Put Fireblock quickstart block loop en.png under Fireblock quickstart block green flag en.png:

Fireblock quickstart game step 1 en.png


② Put Fireblock quickstart block mouse xy en.png into Fireblock quickstart block slide en.png respectively:

Fireblock quickstart game step 2 1 en.png

Fireblock quickstart game step 2 2 en.png


and get:

Fireblock quickstart game step 2 3 en.png


③ Click the dropdown arrow of Fireblock quickstart block face en.png, and select "mouse-pointer" in the popup menu:

Fireblock quickstart game step 3 1 en.png


and get:

Fireblock quickstart game step 3 2 en.png


④ Put Fireblock quickstart game step 3 2 en.png and Fireblock quickstart game step 2 3 en.png into Fireblock quickstart block loop en.png sequentially, and get:

Fireblock quickstart game step 4 en.png


③ Click the dropdown arrow of Fireblock quickstart block touch en.png, and select "mouse-pointer" in the popup menu:

Fireblock quickstart game step 5 1 en.png


and get:

Fireblock quickstart game step 5 2 en.png


⑥ Put Fireblock quickstart game step 5 2 en.png into Fireblock quickstart block if en.png:

Fireblock quickstart game step 6 1 en.png


and get:

Fireblock quickstart game step 6 2 en.png


⑦ Modify text in Fireblock quickstart block say en.png. If you cannot input text directly using input methods, you can use copy/paste method: write it down in notepad, copy the text, then click the edit entry box of Fireblock quickstart block say en.png , delete the contents, and finally press "Ctrl-v" to paste the text:

Fireblock quickstart game step 7 1 en.png


Put it into the execute body of the result of step ⑥ :

Fireblock quickstart game step 7 2 en.png


and get:

Fireblock quickstart game step 7 3 en.png


If you look carefully, you will notice that the shapes of condition and execution slot of Fireblock quickstart block if en.png are different. Therefore, this helps to prevent some common mistake like using "Say" block as the condition, which is impossible in that "Say" block will not provide true or false result. The shape design of blocks is a smart way to solve the matching problem.


⑧ Put Fireblock quickstart game step 7 3 en.png into Fireblock quickstart game step 4 en.png:

Fireblock quickstart game step 8 1 en.png


which gives the final result:

Fireblock quickstart game step 8 2 en.png


Alright, hurry up to click the Fireblock quickstart icon flag.png button above the stage, to start the game. Please remeber to put the mouse cursor on the stage.

Click Fireblock quickstart icon stop.png to stop the game:

Fireblock quickstart game result 1 en.png


Analysis

Let's see what happen with the blocks of this little game:

Fireblock quickstart game step 8 2 en.png


The game is really simple:

1. When Fireblock quickstart icon flag.png is clicked, this block group start to run.

2. Forever run the blocks inside

a. Sprite faces towards mouse cursor
b. Sprite glides to mouse cursor in 1 second
c. Check if the sprite touches the mouse cursor, and say "I caught you" when this is true.


Costumes & Backgrounds

You will wonder, this is a cat catches mouse game, not turtle (this arrow sprite is called turtle in Snap! Turtle is famous in the LEGO programming language) catches mouse.

Let's make the cat real, and the empty white stage more charming.


First, click the turtle icon in the sprite corral in the bottom right:

Fireblock quickstart game costume 1.png


Then click the "Costumes" button in the tabbar, to switch to costumes page:

Fireblock quickstart icon tabbar en.png

Fireblock quickstart game costume 2 en.png


There are mainly three ways to change costumes:

1. Click Fireblock quickstart icon paint sprite.png to invoke the image editor. Draw the costume yourself, and set the rotation center.

2. Drag and drop an picture from local file manager.

3. Use the builtin costumes.


We use the third method here. Click the file menu:

Fireblock quickstart file menu en.png


Select "Costumes..." menu item:

Fireblock quickstart costume menu en.png


Then select "Cat 2" in the popup list. Wow, the cat shows:

Fireblock quickstart game costume 3 en.png


The white empty stage is a little boring. How to change the background? Select stage icon in the sprite corral:

Fireblock quickstart game costume 4 zh.png


Then click the "Costumes" button in the tabbar, to switch to costumes page:

Fireblock quickstart icon tabbar en.png

Fireblock quickstart game costume 5 en.png


Just like the sprite costumes, there are also three ways of changing the backgrounds. Here we use the system builtin one.


Click the file menu:

Fireblock quickstart file menu background en.png


Select "Backgrounds..." menu item:

Fireblock quickstart backgrounds menu en.png


Then select "Bedroom 1" in the popup list. The background is done:

Fireblock quickstart game costume 6 en.png


The stage is now selected. Like the sprite, the stage can also has its own scripts, commonly found in games. Here we switch back to the scripting area of sprite.

Click the sprite icon in the sprite corral:

Fireblock quickstart game costume 7.png


Then click the "Scripts" button in the tabbar, to switch to scripting area:

Fireblock quickstart icon tabbar en.png

Fireblock quickstart game costume 8 en.png


At last, let's click the Fireblock quickstart icon maximize stage.png button above the stage, to switch to the double size stage in presenting mode, and have fun playing Tom & Jerry:

Fireblock quickstart game result 2 en.png