Add a new tween block
This commit is contained in:
@@ -289,3 +289,86 @@ BlocklyJS.javascriptGenerator.forBlock["tween_sprite_property"] = function (
|
|||||||
|
|
||||||
return code;
|
return code;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Blockly.Blocks["tween_sprite_to_xy"] = {
|
||||||
|
init: function () {
|
||||||
|
this.appendValueInput("X")
|
||||||
|
.setCheck("Number")
|
||||||
|
.appendField("tween to x:");
|
||||||
|
this.appendValueInput("Y")
|
||||||
|
.setCheck("Number")
|
||||||
|
.appendField("y:");
|
||||||
|
this.appendValueInput("DURATION")
|
||||||
|
.setCheck("Number")
|
||||||
|
.appendField("in");
|
||||||
|
this.appendDummyInput()
|
||||||
|
.appendField("seconds using")
|
||||||
|
.appendField(
|
||||||
|
new Blockly.FieldDropdown([
|
||||||
|
["linear", "Linear"],
|
||||||
|
["sine", "Sine"],
|
||||||
|
["quadratic", "Quad"],
|
||||||
|
["cubic", "Cubic"],
|
||||||
|
["quartic", "Quart"],
|
||||||
|
["quintic", "Quint"],
|
||||||
|
["expo", "Expo"],
|
||||||
|
["circ", "Circ"],
|
||||||
|
["back", "Back"],
|
||||||
|
["elastic", "Elastic"],
|
||||||
|
["bounce", "Bounce"],
|
||||||
|
]),
|
||||||
|
"EASING_TYPE"
|
||||||
|
)
|
||||||
|
.appendField(
|
||||||
|
new Blockly.FieldDropdown([
|
||||||
|
["in", "In"],
|
||||||
|
["out", "Out"],
|
||||||
|
["in-out", "InOut"],
|
||||||
|
]),
|
||||||
|
"EASING_MODE"
|
||||||
|
);
|
||||||
|
this.setInputsInline(true);
|
||||||
|
this.setPreviousStatement(true, "default");
|
||||||
|
this.setNextStatement(true, "default");
|
||||||
|
this.setColour("#32a2c0");
|
||||||
|
this.setTooltip(
|
||||||
|
"Tween sprite to a specific x and y position over time using easing"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
BlocklyJS.javascriptGenerator.forBlock["tween_sprite_to_xy"] = function (
|
||||||
|
block,
|
||||||
|
generator
|
||||||
|
) {
|
||||||
|
const x =
|
||||||
|
generator.valueToCode(block, "X", BlocklyJS.Order.ATOMIC) || "0";
|
||||||
|
const y =
|
||||||
|
generator.valueToCode(block, "Y", BlocklyJS.Order.ATOMIC) || "0";
|
||||||
|
const duration =
|
||||||
|
generator.valueToCode(block, "DURATION", BlocklyJS.Order.ATOMIC) ||
|
||||||
|
"1";
|
||||||
|
const easingType = block.getFieldValue("EASING_TYPE");
|
||||||
|
const easingMode = block.getFieldValue("EASING_MODE");
|
||||||
|
const code = `await Promise.all([
|
||||||
|
startTween({
|
||||||
|
from: sprite.x,
|
||||||
|
to: ${x},
|
||||||
|
duration: ${duration},
|
||||||
|
easing: "${easingMode + easingType}",
|
||||||
|
onUpdate: async (tweenValue) => {
|
||||||
|
sprite.x = tweenValue;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
startTween({
|
||||||
|
from: sprite.y,
|
||||||
|
to: -(${y}),
|
||||||
|
duration: ${duration},
|
||||||
|
easing: "${easingMode + easingType}",
|
||||||
|
onUpdate: async (tweenValue) => {
|
||||||
|
sprite.y = tweenValue;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);\n`;
|
||||||
|
return code;
|
||||||
|
};
|
||||||
@@ -2191,6 +2191,23 @@ const extensions = [
|
|||||||
</shadow>
|
</shadow>
|
||||||
</value>
|
</value>
|
||||||
</block>
|
</block>
|
||||||
|
<block type="tween_sprite_to_xy">
|
||||||
|
<value name="X">
|
||||||
|
<shadow type="math_number">
|
||||||
|
<field name="NUM">0</field>
|
||||||
|
</shadow>
|
||||||
|
</value>
|
||||||
|
<value name="Y">
|
||||||
|
<shadow type="math_number">
|
||||||
|
<field name="NUM">0</field>
|
||||||
|
</shadow>
|
||||||
|
</value>
|
||||||
|
<value name="DURATION">
|
||||||
|
<shadow type="math_number">
|
||||||
|
<field name="NUM">1</field>
|
||||||
|
</shadow>
|
||||||
|
</value>
|
||||||
|
</block>
|
||||||
<block type="tween_block">
|
<block type="tween_block">
|
||||||
<value name="FROM">
|
<value name="FROM">
|
||||||
<shadow type="math_number">
|
<shadow type="math_number">
|
||||||
|
|||||||
Reference in New Issue
Block a user