如何

编写一个基于操场的教程


基于操场的教程

这种类型的游乐场需要学生逐步学习Babylon.js的功能,同时还要突出显示该功能使用的代码。整个代码都存在于运动场编辑器中,但任何分散注意力的代码都可以向用户隐藏。通常,不应为学生提供编辑代码或使用操场上所有功能的设施,因为这样做会破坏他们试图遵循的教程。

以下是三个PBT示例,可让您大致了解可能的情况。

但是,由于它们是不可编辑的,因此看不到它们是如何编写的。编写指南的链接为:

入门指南
滑块指南
中级指南
高级指南

创建PBT

为了帮助对PBT进行编码,提供了一些功能,用于在游乐场编辑器中操纵文本并使用Babylon.GUI创建基本对话框。尽管编辑器需要提供功能,但是可以使用任何与Babylon.js一起编写用户界面的方法。

要考虑的另一重要事项是在何处编写PBT代码。一旦代码在运动场编辑器中并且“运行”或“保存”后,代码文本将被其自己的代码修改。因此,最好将其外部写入操场。稍后再详细介绍。

第一步

考虑一下您想演示的操场代码,并以通常的方式编写它

var createScene = function() {

    //Usual PG code

    return scene;
}

要开始新教程,您需要一个“新PBT()”

var createScene = function() {

    //Usual PG code

    var pbt = new PBT();

    return scene;
}

在本节的其余部分中,将pbt视为新创建的PBT。

游乐场修改方法

hideMenu从菜单栏中删除所有菜单项,但标题和示例游乐场的下拉选项除外。

pbt.hideMenu()

editOff使游乐场中的所有代码不可编辑

pbt.editOff();

editOn允许编辑游乐场编辑器中的代码。当代码本身需要对任何行进行更改时,都需要这样做。当留在用户身上时,还可以在游乐场教程中编辑文本。

pbt.editOff();

编辑器修改方法

线装饰

clearDecorLines清除所有行上的所有装饰,并使所有文本变亮。

pbt.clearDecorLines()

setDecorLines通过添加线条装饰和使文本变暗来强调线条。要装饰的线作为数组中的开始线,结束线对传递。

pbt.setDecorLines([27, 27]); //decorates line 27 only
pbt.setDecorLines([3, 15]); //decorates lines 3 to 15 inclusive
pbt.setDecorLines([10, 17, 25, 31]); //decorates lines 10 to 17 and lines 25 to 3

线变更

replaceLines用给定的新文本替换给定行范围内的文本。只有一个范围的行是作为数组对传递的。

pbt.replaceLines([13, 13], "mesh.rotation.x = Math.PI/4"); //replaces line 13 with one line of text
pbt.replaceLines([15, 15]), "mesh.position.x = 4;\r\nmesh.position.y = 6;\r\nmesh.position.z = -2;"); // replaces line 15 with multiple lines
pbt.replaceLines([23,28], "//All Gone"); //replaces lines 23 to 28 with a single line

replaceText在从开始到结束位置的给定行中插入文本。

pbt.replaceText(12, 3, 8, "WORLD"); // On line 12 replaces the characters from 3 to 8 with WORD

hideLines隐藏在数组中作为开始和结束对传递的行。每次对hideLines的调用只会隐藏数组中给定的那些行,其他所有行都会显示出来。

pbt.hideLines([27, 27]); //hides line 27 only, all other lines are displayed
pbt.hideLines([3, 15]); //hides lines 3 to 15 inclusive only, all other lines are displayed
pbt.hideLines([10, 17, 25, 31]); //hides lines 10 to 17 and lines 25 to 31 only, all other lines are displayed

hideRange隐藏在数组中作为开始和结束对传递的行的范围。hideRange方法将给定行的范围添加到已隐藏的行中。

pbt.hideRange([27, 27]); //hides line 27 together with already hidden lines
pbt.hideRange([3, 15]); //hides lines 3 to 15 together with already hidden lines
pbt.hideRange([10, 17, 25, 31]); //hides lines 10 to 17 and lines 25  to 31 together with already hidden lines

showRange显示在数组中作为开始和结束对传递的行的范围。如果以前使用具有相同行范围的hideRange隐藏了该方法,则showRange方法只会影响给定的行范围。

pbt.showRange([27, 27]); //displays line 27 together with already displayed lines
pbt.showRange([3, 15]); //displays lines 3 to 15 inclusive together with already displayed lines
pbt.showRange([10, 17, 25, 31]); //displays lines 10 to 17 and lines 25 to 31 together with already displayed lines

线获取

getLineText返回给定行号上的文本。

var lineText = pbt.getLineText();

GUI对话方法

可以为PBT创建两个对话框。

信息对话盒

它由一个图像区域,一个文本区域以及“上一个”和“下一个”按钮组成。

Standard Dialogue

标准对话

var dialog = new PBT.StandardDialog(options)

尽管可以使用“上一步”按钮,但是撤消已经执行的任何操作的难度意味着通常可以将其隐藏。

选项 默认值
文本 (串) “基于操场的教程”
宽度 (串) “ 50%”
高度 (串) “ 25%”
最佳 (串) "0px"
剩下 (串) “ 0px”
垂直对齐 (数) BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP
水平对齐 (数)> BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT
useImage (布尔值) 真正
imageUrl (串) BJS PBT徽标的路径
options = {
    left: "0.5%",
    top: "0.2%",
    text: "Read on for the difference between .rotation and .rotate and follow to the end for examples."
}
var dialog = new pbt.StandardDialog(option);  
dialog.hidePrev();

将'useImage'设置为'false'会扩展文本区域的宽度。

构造后,有许多方法可用来更改信息对话框。

dialog.setText("More Information");
dialog.setWidth("20%");
dialog.setHeight("45px");
dialog.setTop("5px");
dialog.setLeft("15%");
dialog.setHorizontalAlignment(BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER);
dialog.setVerticalAlignment(BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM);
dialog.show(); //information box visible
dialog.hide(); //information box hidden
dialog.showNext(); //next button visible
dialog.hideNext(); //next button hidden
dialog.showPrev(); //prev button visible
dialog.hidePrev(); //prev button hidden

还有两个方法getNextButton和getPrevButton允许将功能添加到“下一步”和“上一步”按钮。

dialog.getNextButton().onPointerUpObservable.add(function() {       
    tutorIndex++;   
    tutorial.setText(tutorTexts[tutorIndex]);
    nextAction(tutorIndex);
});

选择对话盒

这种选择对话框包含按钮组 “单选”,“复选框”或“滑块”按钮。每个组只能包含一种类型的按钮,但是您可以根据需要在一个框中混合并匹配组的类型。

Selection Dialog       图 1.

使用ButtonGroup功能构造按钮组

var myRadioGroup = new PBT.ButtonGroup("Name for Radio Group", "R");

var myCheckboxGroup = new PBT.ButtonGroup("Name for Checkbox Group", "C");

var mySliderGroup = new PBT.ButtonGroup("Name for Slider Group", "S");

第一个参数是组的名称,该名称将在选择框中显示为组标题。第二个可选参数给出按钮的类型,按钮为“ radio”或“ R”,radio按钮为“ checkbox”或“ C”,按钮为checkbox“ Slider”或“ S” slider。默认值为“复选框”,因此如果这是您想要的按钮类型,则可以忽略。在“单选”按钮的情况下,按钮组还将放置在一起的那些按钮放在一起。对于“复选框”和“滑块”按钮,分组只是修饰。

该buttonGroup对象有两种addButton添加“单选”或“复选框”按钮以及addSlider添加滑块的方法。

addButton

该addButton方法采用三个参数,并创建适当的单选或复选框按钮。

myRadioGroup.addButton("Radio Button Name", function, false)

myCheckboxGroup.addButton("Checkbox Button Name", function, true);

前两个参数是必需的,第三个参数是可选的。

  • 名称:字符串,按钮的名称,将显示为按钮的文本;
  • 功能:选择时要调用的功能;
  • 选中:布尔值,默认为false;当设置为true时,表示按钮已选中或选中。

对于上面的图1.按钮组的代码可以是

var boxGroup = new pbt.ButtonGroup("Box Code");
boxGroup.addButton("Hide", hideBoxCode, true);

var animGroup = new pbt.ButtonGroup("Anim Code");
animGroup.addButton("Hide", hideAnimCode, true);

var spaceGroup = new pbt.ButtonGroup("Space", "radio");    
spaceGroup.addButton("WORLD", worldSpace, true);
spaceGroup.addButton("LOCAL", localSpace);

addSlider

Slider       图 2.

该addSlider方法有七个参数

mySliderGroup.addSlider("Slider Name", function, "units", label function, minimum, maximum, start);
  • 名称字符串,显示为滑块的文本,其后是滑块的值;
  • 功能:函数,在滑块移动时调用;
  • 单位:字符串,测量单位在滑块值后出现;
  • 标签功能:当滑块移动时也要调用的函数,用于更新对话框中的滑块值;
  • 最小值:数字,滑块的最小值;
  • 最大值:数字,滑块的最大值;
  • 起始:数字,滑块的初始值。

对于图2。代码可以是

var slider = new pbt.ButtonGroup("Angle", "S");
slider.addSlider("X axis", boxAboutX, "degs", updateLabelX, 0, 2 * Math.PI, 0);
slider.addSlider("Y axis", boxAboutY, "degs", updateLabelY, 0, 2 * Math.PI, 0);
slider.addSlider("Z axis", boxAboutZ, "degs", updateLabelZ, 0, 2 * Math.PI, 0);

选件

然后可以将这些组添加到SelectionDialog该groups选项的新框中。

var selector = new SelectionDialog(options);

选择对话框的选项是

选项 默认值
宽度 (串) “ 50%”
高度 (串) “ 25%”
最佳 (串) “ 0px”
剩下 (串) “ 0px”
垂直对齐 (数) BABYLON.GUI.Control.VERTICA\L_ALIGNMENT_BOTTOM;
水平对齐 (数) BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT
团体 (数组)必填
var selector = new pbt.SelectionDialog({groups:[boxGroup, animGroup, spaceGroup]});

要么

var sliderSelector = new pbt.SelectionDialog({groups: [slider]});

或可能

var options = {
    width: "40%",
    height: "10%",
    top: "20%",
    groups: [boxGroup, animGroup, spaceGroup, slider]
}

var selector = new pbt.SelectionDialog(options);

在哪里写代码

重复先前的说法;虽然可以直接将PBT写到Playground编辑器中,但这不是一个好主意。在操场上运行并保存代码会更改代码,并且您很可能无法找回原始文本。

最简单的方法是使用您喜欢的文本编辑器并另存为文本文件。当您准备就绪时,可以尝试复制文本并将其粘贴到操场上。单击“运行”按钮进行测试,避免使用“保存”按钮,直到您确定一切正常为止。您可能会发现它需要很多调整,直到正确为止。更重要的是使行号正确。当您发现需要添加和编辑代码时,这些行号会不断变化。

对于熟悉Node.js,git和npm的人,还有另一种避免复制和粘贴部分的方法,直到您完成工作副本。为此,您将需要在本地运行一个游乐场版本。

克隆Babylon.js

git clone https://github.com/BabylonJS/Babylon.js.git

在Babylon.js目录中全局安装gulp
gulp install

转到Playground目录并进行npm安装
monaco install

转到Tools / Gulp目录并安装npm
npm install

要编写教程,请使用您喜欢的IDE(例如VSCode)打开Playground目录。在其中有一个scripts文件夹,将您的Javascript教程代码保存在此文件夹中。该文件夹中还有一个scripts.txt文件,该文件列出了该文件scripts夹中的所有文件,然后可以在操场右上方的“ 场景”下拉列表中进行访问。将您的文件名添加到列表中。现在,您可以编写和编辑文件,运行游乐场的本地版本,并从列表中选择它进行测试。

要运行游乐场的本地版本,请确保您位于Babylon.js副本的Tools / Gulp目录中,并且npm run star gulp run

服务器在浏览器中运行后,输入地址 http://localhost:1338/Playground/index.html 来运行

进一步阅读

入门指南
滑块指南
中级指南
高级指南