Play
:quality(85)/https://cdn.frvr.ai/684c96a282414a3397386646.png)
:quality(85)/https://cdn.upit.com/5tf6gg2ys496jfyvsv4b2b4w.gif)
:quality(85)/https://cdn.frvr.ai/684c96ba82414a3397386648.png)
#BeatMixer
#Sprunki
#MusicGame
#DragAndDrop
#SoundMixing
Creation History
User prompt
Remove sprunki edition text
User prompt
Change title from beat mixer studio to Sprunki Beat Mixer
User prompt
Add this character: Inky
User prompt
Loop their sound every 1.3 seconds (for each character, not all every 1.3, each have their own timer)
User prompt
Make sounds loop they still don't
User prompt
Make tapping on character or their slot remove them from slot
User prompt
Make sounds loop
User prompt
Make them placeable in slots
User prompt
Make them placeable in slots to make their sounds. also add cool animations while they sing ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'addChild')' in or related to this line: 'character.parent.addChild(character);' Line Number: 310
User prompt
Still not working...
User prompt
Make dragging work
User prompt
Create blank sound assets for each character and make dragging work
User prompt
Create blank sound assets for each character
User prompt
Create blank sound assets for each character and make dragging work ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Create blank sound assets for each character and make dragging work ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Seperate them more and make all text bigger
Code edit (1 edits merged)
Please save this source code
User prompt
Beat Mixer Studio - Sprunki Edition
Initial prompt
Beat mixer! Drag 3 singers, to make an awesome sound! Beats: Oren, Horror Oren, Raddy. Effects: Horror Raddy, Alt Horror Wenda. Voices: Wenda, Horror Wenda, Jevin, Horror Jevin
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Character = Container.expand(function (characterData) {
var self = Container.call(this);
self.characterData = characterData;
self.isOnBoard = false;
self.originalPosition = {
x: 0,
y: 0
};
self.boardSlot = null;
self.soundInstance = null;
var characterGraphics = self.attachAsset(characterData.assetId, {
anchorX: 0.5,
anchorY: 0.5
});
// Make character interactive
self.interactive = true;
// Add character name text
var nameText = new Text2(characterData.name, {
size: 45,
fill: 0xFFFFFF
});
nameText.anchor.set(0.5, 0.5);
nameText.y = 90;
self.addChild(nameText);
self.playSound = function () {
if (self.soundInstance) {
self.soundInstance.stop();
}
self.soundInstance = LK.getSound(characterData.soundId);
self.soundInstance.play();
// Visual feedback - bounce animation
tween(characterGraphics, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(characterGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeIn
});
}
});
// Continuous singing animation
self.singAnimation = LK.setInterval(function () {
// Wobble effect
tween(characterGraphics, {
rotation: 0.1
}, {
duration: 300,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(characterGraphics, {
rotation: -0.1
}, {
duration: 300,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(characterGraphics, {
rotation: 0
}, {
duration: 300,
easing: tween.easeInOut
});
}
});
}
});
// Pulsing effect based on sound type
if (characterData.type === 'beat') {
tween(characterGraphics, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(characterGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150,
easing: tween.easeIn
});
}
});
} else if (characterData.type === 'voice') {
// Smooth scaling for voice
tween(characterGraphics, {
scaleY: 1.15
}, {
duration: 400,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(characterGraphics, {
scaleY: 1.0
}, {
duration: 400,
easing: tween.easeInOut
});
}
});
}
}, 600);
};
self.stopSound = function () {
if (self.soundInstance) {
self.soundInstance.stop();
self.soundInstance = null;
}
// Stop singing animation
if (self.singAnimation) {
LK.clearInterval(self.singAnimation);
self.singAnimation = null;
}
// Reset rotation
tween(characterGraphics, {
rotation: 0
}, {
duration: 200,
easing: tween.easeOut
});
};
self.returnToOriginalPosition = function () {
tween(self, {
x: self.originalPosition.x,
y: self.originalPosition.y
}, {
duration: 300,
easing: tween.easeOut
});
};
return self;
});
var MixingSlot = Container.expand(function (slotIndex) {
var self = Container.call(this);
self.slotIndex = slotIndex;
self.character = null;
self.isEmpty = true;
var slotGraphics = self.attachAsset('mixing_slot', {
anchorX: 0.5,
anchorY: 0.5
});
self.addCharacter = function (character) {
if (self.character) {
self.removeCharacter();
}
self.character = character;
self.isEmpty = false;
character.isOnBoard = true;
character.boardSlot = self;
// Visual feedback - glow effect
tween(slotGraphics, {
tint: 0x888888,
scaleX: 1.05,
scaleY: 1.05
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(slotGraphics, {
tint: 0x666666,
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeIn
});
}
});
// Position character in slot with bounce
tween(character, {
x: self.x,
y: self.y - 50
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(character, {
y: self.y
}, {
duration: 200,
easing: tween.bounceOut,
onFinish: function onFinish() {
character.playSound();
}
});
}
});
};
self.removeCharacter = function () {
if (self.character) {
self.character.stopSound();
self.character.isOnBoard = false;
self.character.boardSlot = null;
// Animate character up before returning
tween(self.character, {
y: self.character.y - 100,
scaleX: 0.8,
scaleY: 0.8
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
self.character.returnToOriginalPosition();
}
});
self.character = null;
}
self.isEmpty = true;
// Fade slot back to normal
tween(slotGraphics, {
tint: 0xFFFFFF,
scaleX: 0.95,
scaleY: 0.95
}, {
duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(slotGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150,
easing: tween.easeIn
});
}
});
};
self.containsPoint = function (x, y) {
var bounds = self.getBounds();
return x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x1a1a2e
});
/****
* Game Code
****/
// Sound assets for each character
// Character data
// Characters
// Mixing board slots
// Sounds
var characterData = [{
name: "Oren",
assetId: "oren",
soundId: "oren_beat",
type: "beat"
}, {
name: "Horror Oren",
assetId: "horror_oren",
soundId: "horror_oren_beat",
type: "beat"
}, {
name: "Raddy",
assetId: "raddy",
soundId: "raddy_beat",
type: "beat"
}, {
name: "Horror Raddy",
assetId: "horror_raddy",
soundId: "horror_raddy_effect",
type: "effect"
}, {
name: "Wenda",
assetId: "wenda",
soundId: "wenda_voice",
type: "voice"
}, {
name: "Horror Wenda",
assetId: "horror_wenda",
soundId: "horror_wenda_voice",
type: "voice"
}, {
name: "Alt Horror Wenda",
assetId: "alt_horror_wenda",
soundId: "alt_horror_wenda_effect",
type: "effect"
}, {
name: "Jevin",
assetId: "jevin",
soundId: "jevin_voice",
type: "voice"
}, {
name: "Horror Jevin",
assetId: "horror_jevin",
soundId: "horror_jevin_voice",
type: "voice"
}];
// Game elements
var characters = [];
var mixingSlots = [];
var draggedCharacter = null;
var dragOffset = {
x: 0,
y: 0
};
// Title
var titleText = new Text2("Beat Mixer Studio", {
size: 120,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0);
titleText.x = 2048 / 2;
titleText.y = 100;
game.addChild(titleText);
var subtitleText = new Text2("Sprunki Edition", {
size: 70,
fill: 0xFFE66D
});
subtitleText.anchor.set(0.5, 0);
subtitleText.x = 2048 / 2;
subtitleText.y = 200;
game.addChild(subtitleText);
// Create mixing board slots
var slotStartX = 2048 / 2 - 4 * 300 / 2;
var slotY = 800;
for (var i = 0; i < 4; i++) {
var slot = new MixingSlot(i);
slot.x = slotStartX + i * 300;
slot.y = slotY;
mixingSlots.push(slot);
game.addChild(slot);
}
// Create characters
var charactersPerRow = 5;
var characterStartX = 2048 / 2 - charactersPerRow * 300 / 2;
var characterStartY = 1800;
for (var i = 0; i < characterData.length; i++) {
var character = new Character(characterData[i]);
var row = Math.floor(i / charactersPerRow);
var col = i % charactersPerRow;
character.x = characterStartX + col * 300;
character.y = characterStartY + row * 300;
character.originalPosition.x = character.x;
character.originalPosition.y = character.y;
characters.push(character);
game.addChild(character);
}
// Instructions
var instructionText = new Text2("Drag characters to mixing slots to create beats!", {
size: 60,
fill: 0xFFFFFF
});
instructionText.anchor.set(0.5, 0);
instructionText.x = 2048 / 2;
instructionText.y = 1200;
game.addChild(instructionText);
// Helper functions
function getCharacterAt(x, y) {
for (var i = characters.length - 1; i >= 0; i--) {
var character = characters[i];
if (!character.isOnBoard) {
// Use character position and a fixed hit area size
var halfWidth = 75; // Half of character width
var halfHeight = 75; // Half of character height
if (x >= character.x - halfWidth && x <= character.x + halfWidth && y >= character.y - halfHeight && y <= character.y + halfHeight) {
return character;
}
}
}
return null;
}
function getMixingSlotAt(x, y) {
for (var i = 0; i < mixingSlots.length; i++) {
if (mixingSlots[i].containsPoint(x, y)) {
return mixingSlots[i];
}
}
return null;
}
// Double tap to remove character from slot
var lastTapTime = 0;
var lastTapCharacter = null;
// Event handlers
game.down = function (x, y, obj) {
var currentTime = Date.now();
var character = getCharacterAt(x, y);
// Check for double tap to remove character from slot
if (character && character === lastTapCharacter && currentTime - lastTapTime < 300) {
if (character.isOnBoard && character.boardSlot) {
character.boardSlot.removeCharacter();
}
return;
}
lastTapTime = currentTime;
lastTapCharacter = character;
if (character && !character.isOnBoard) {
draggedCharacter = character;
dragOffset.x = x - character.x;
dragOffset.y = y - character.y;
// Bring to front - store parent reference before removing
var parentContainer = character.parent;
parentContainer.removeChild(character);
parentContainer.addChild(character);
// Visual feedback
tween(character, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 100,
easing: tween.easeOut
});
}
};
game.move = function (x, y, obj) {
if (draggedCharacter) {
draggedCharacter.x = x - dragOffset.x;
draggedCharacter.y = y - dragOffset.y;
// Highlight slot when hovering
var hoverSlot = getMixingSlotAt(x, y);
for (var i = 0; i < mixingSlots.length; i++) {
var slot = mixingSlots[i];
if (slot === hoverSlot && slot.isEmpty) {
tween(slot, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 100,
easing: tween.easeOut
});
} else {
tween(slot, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100,
easing: tween.easeOut
});
}
}
} else {
// Hover effect for characters
var hoverCharacter = getCharacterAt(x, y);
for (var i = 0; i < characters.length; i++) {
var character = characters[i];
if (character === hoverCharacter && !character.isOnBoard) {
tween(character, {
scaleX: 1.05,
scaleY: 1.05
}, {
duration: 100,
easing: tween.easeOut
});
} else if (!character.isOnBoard && character !== draggedCharacter) {
tween(character, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100,
easing: tween.easeOut
});
}
}
}
};
game.up = function (x, y, obj) {
if (draggedCharacter) {
var slot = getMixingSlotAt(x, y);
if (slot && slot.isEmpty) {
slot.addCharacter(draggedCharacter);
} else {
draggedCharacter.returnToOriginalPosition();
}
// Reset scale
tween(draggedCharacter, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100,
easing: tween.easeIn
});
draggedCharacter = null;
}
}; ===================================================================
--- original.js
+++ change.js
@@ -35,29 +35,104 @@
self.soundInstance.stop();
}
self.soundInstance = LK.getSound(characterData.soundId);
self.soundInstance.play();
- // Visual feedback
+ // Visual feedback - bounce animation
tween(characterGraphics, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 200,
- easing: tween.easeOut
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ tween(characterGraphics, {
+ scaleX: 1.0,
+ scaleY: 1.0
+ }, {
+ duration: 200,
+ easing: tween.easeIn
+ });
+ }
});
- tween(characterGraphics, {
- scaleX: 1.0,
- scaleY: 1.0
- }, {
- duration: 200,
- easing: tween.easeIn
- });
+ // Continuous singing animation
+ self.singAnimation = LK.setInterval(function () {
+ // Wobble effect
+ tween(characterGraphics, {
+ rotation: 0.1
+ }, {
+ duration: 300,
+ easing: tween.easeInOut,
+ onFinish: function onFinish() {
+ tween(characterGraphics, {
+ rotation: -0.1
+ }, {
+ duration: 300,
+ easing: tween.easeInOut,
+ onFinish: function onFinish() {
+ tween(characterGraphics, {
+ rotation: 0
+ }, {
+ duration: 300,
+ easing: tween.easeInOut
+ });
+ }
+ });
+ }
+ });
+ // Pulsing effect based on sound type
+ if (characterData.type === 'beat') {
+ tween(characterGraphics, {
+ scaleX: 1.1,
+ scaleY: 1.1
+ }, {
+ duration: 150,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ tween(characterGraphics, {
+ scaleX: 1.0,
+ scaleY: 1.0
+ }, {
+ duration: 150,
+ easing: tween.easeIn
+ });
+ }
+ });
+ } else if (characterData.type === 'voice') {
+ // Smooth scaling for voice
+ tween(characterGraphics, {
+ scaleY: 1.15
+ }, {
+ duration: 400,
+ easing: tween.easeInOut,
+ onFinish: function onFinish() {
+ tween(characterGraphics, {
+ scaleY: 1.0
+ }, {
+ duration: 400,
+ easing: tween.easeInOut
+ });
+ }
+ });
+ }
+ }, 600);
};
self.stopSound = function () {
if (self.soundInstance) {
self.soundInstance.stop();
self.soundInstance = null;
}
+ // Stop singing animation
+ if (self.singAnimation) {
+ LK.clearInterval(self.singAnimation);
+ self.singAnimation = null;
+ }
+ // Reset rotation
+ tween(characterGraphics, {
+ rotation: 0
+ }, {
+ duration: 200,
+ easing: tween.easeOut
+ });
};
self.returnToOriginalPosition = function () {
tween(self, {
x: self.originalPosition.x,
@@ -85,32 +160,85 @@
self.character = character;
self.isEmpty = false;
character.isOnBoard = true;
character.boardSlot = self;
- // Visual feedback
- slotGraphics.tint = 0x666666;
- // Position character in slot
+ // Visual feedback - glow effect
+ tween(slotGraphics, {
+ tint: 0x888888,
+ scaleX: 1.05,
+ scaleY: 1.05
+ }, {
+ duration: 200,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ tween(slotGraphics, {
+ tint: 0x666666,
+ scaleX: 1.0,
+ scaleY: 1.0
+ }, {
+ duration: 200,
+ easing: tween.easeIn
+ });
+ }
+ });
+ // Position character in slot with bounce
tween(character, {
x: self.x,
- y: self.y
+ y: self.y - 50
}, {
- duration: 300,
+ duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
- character.playSound();
+ tween(character, {
+ y: self.y
+ }, {
+ duration: 200,
+ easing: tween.bounceOut,
+ onFinish: function onFinish() {
+ character.playSound();
+ }
+ });
}
});
};
self.removeCharacter = function () {
if (self.character) {
self.character.stopSound();
self.character.isOnBoard = false;
self.character.boardSlot = null;
- self.character.returnToOriginalPosition();
+ // Animate character up before returning
+ tween(self.character, {
+ y: self.character.y - 100,
+ scaleX: 0.8,
+ scaleY: 0.8
+ }, {
+ duration: 200,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ self.character.returnToOriginalPosition();
+ }
+ });
self.character = null;
}
self.isEmpty = true;
- slotGraphics.tint = 0xFFFFFF;
+ // Fade slot back to normal
+ tween(slotGraphics, {
+ tint: 0xFFFFFF,
+ scaleX: 0.95,
+ scaleY: 0.95
+ }, {
+ duration: 150,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ tween(slotGraphics, {
+ scaleX: 1.0,
+ scaleY: 1.0
+ }, {
+ duration: 150,
+ easing: tween.easeIn
+ });
+ }
+ });
};
self.containsPoint = function (x, y) {
var bounds = self.getBounds();
return x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height;
@@ -298,8 +426,53 @@
game.move = function (x, y, obj) {
if (draggedCharacter) {
draggedCharacter.x = x - dragOffset.x;
draggedCharacter.y = y - dragOffset.y;
+ // Highlight slot when hovering
+ var hoverSlot = getMixingSlotAt(x, y);
+ for (var i = 0; i < mixingSlots.length; i++) {
+ var slot = mixingSlots[i];
+ if (slot === hoverSlot && slot.isEmpty) {
+ tween(slot, {
+ scaleX: 1.1,
+ scaleY: 1.1
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ } else {
+ tween(slot, {
+ scaleX: 1.0,
+ scaleY: 1.0
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ }
+ }
+ } else {
+ // Hover effect for characters
+ var hoverCharacter = getCharacterAt(x, y);
+ for (var i = 0; i < characters.length; i++) {
+ var character = characters[i];
+ if (character === hoverCharacter && !character.isOnBoard) {
+ tween(character, {
+ scaleX: 1.05,
+ scaleY: 1.05
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ } else if (!character.isOnBoard && character !== draggedCharacter) {
+ tween(character, {
+ scaleX: 1.0,
+ scaleY: 1.0
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ }
+ }
}
};
game.up = function (x, y, obj) {
if (draggedCharacter) {
Showing 1 to 20 of 20
Images
:quality(85)/https://cdn.frvr.ai/684c8c6382414a3397386622.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8c9582414a3397386624.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8ca282414a3397386626.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8cc682414a3397386628.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8cfa82414a339738662a.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8d2d82414a339738662c.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8d47f87acceebab3394a.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8d9182414a339738662e.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c8d99f87acceebab3394c.png%3F3)
:quality(85)/https://cdn.frvr.ai/684c979682414a339738664a.png%3F3)
Sounds & Music
Used plugins
@upit/tween
