在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:jsfehler/phaser-ui-tools开源软件地址:https://github.com/jsfehler/phaser-ui-tools开源编程语言:JavaScript 97.0%开源软件介绍:Phaser UI ToolsI really wanted a viewport with a scrollbar. Things escalated. Documentationhttps://jsfehler.github.io/phaser-ui-tools/ ReferencesScrollbar math: http://csdgn.org/article/scrollbar Getting StartedUsing NPMOn the command line, type:
The objects are now available via import:
Adding the file directly to your projectGet phaser-ui-tools.js from the releases and add it to your project's index.html. It should look something like:
The objects can now be used directly:
The ToolsText OverlaysTextSpriteA sprite that can have text on top. Text is added with the setText() method. var textSprite = new uiWidgets.TextSprite(
game, x, y, key,
);
textSprite.setText(label, style); TextButtonA button that can have text on top. Text is added with the setText() method. var textButton = new uiWidgets.TextButton(
game, x, y, key, callback, callbackContext, overKey, outKey, downKey, upKey,
);
textButton.setText(label, style); ExamplesPhaser CEPhaser 3ContainersColumnColumns are Phaser Groups where each child added to the group is placed directly under the previous child. If an object can be a child of a Group, it can likewise be in a Column. var column = new uiWidgets.Column(game, 8, 8);
column.addNode(sprite_a, 8, 8);
column.addNode(sprite_b, 8, 8);
column.addNode(sprite_c, 8, 8); RowRows are Phaser Groups where each child added to the group is placed directly next to the previous child. If an object can be a child of a Group, it can likewise be in a Row. var row = new uiWidgets.Row(game, 8, 8);
row.addNode(sprite_a, 8, 8);
row.addNode(sprite_b, 8, 8);
row.addNode(sprite_c, 8, 8); ViewportViewports are Phaser Groups where the children in the group are only visible if they're within the viewport's area. If an object can be a child of a Group, it can likewise be in a Viewport. Viewports can be combined with a Scrollbar to create a scrollable display. Placing a Column or Row inside a Viewport is a simple way to align content. var viewport = new uiWidgets.Viewport(game, 75, 75, 600, 260);
viewport.addNode(column); BarsScrollbarScrollbars are used to move the objects in a Viewport. They must be used with a Viewport. A tweening duration and easing can be specified. This will be triggered when moving the bar. var scrollbar = new uiWidgets.Scrollbar(
game,
viewport,
true,
true,
true,
trackImage,
barImage,
{'duration': 300, 'ease': Phaser.Easing.Quadratic.Out}
); ExamplesPhaser CEPhaser 3ValueBarValuebars are like Scrollbars, but instead of moving content, they increase/decrease a number. Valuebars always have a minimum number of 0, but the starting and maximum number can be set. A tweening duration and easing can be specified. This will be triggered when moving the bar. var valuebar = new uiWidgets.ValueBar(
game,
{'x': 50, 'y': 10},
{'step': 1, 'startValue': 0, 'maxValue': 100},
true,
false,
true,
trackImage,
barImage,
{'duration': 100, 'ease': Phaser.Easing.Quadratic.Out}
); ExamplesPhaser CEMultiple ValueBar inside a Column, with background image and keyboard events | Code Phaser 3QuantityBarQuantityBars do not adjust a value, they get adjusted by a value. The bar grows and shrinks based on a value. They can be used for health bars, stamina bars, etc. A tweening duration and easing can be specified. This will be triggered when moving the bar. var quantitybar = new uiWidgets.QuantityBar(
game,
{'x': 50, 'y': 10},
{'startValue': 50, 'maxValue': 100},
false,
false,
trackImage,
barImage,
{'duration': 400, 'ease': Phaser.Easing.Quadratic.Out}
); ExamplesPhaser CEPhaser 3Wheel3DA collection of sprites that are arranged around a three dimensional wheel. The wheel can be adjusted and rotated along the x, y, or z axis. var wheel = new uiWidgets.Wheel3D(
game,
{"x": game.world.centerX - 100, "y": game.world.centerY},
[sprite1, sprite2, sprite3, sprite4],
0,
90,
"y",
{"x":0, "y": 0, "z": 0}
); ExamplesPhaser CEPhaser 3 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论