Play
:quality(85)/https://cdn.frvr.ai/68735e4f68418c7cdce8cf4e.png)
:quality(85)/https://cdn.frvr.ai/68735e3d68418c7cdce8cf4c.png)
#LabubuMaker
#CharacterCustomization
#CreativeGames
#DesignYourOwn
#CuteCharacters
Creation History
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var CategoryButton = Container.expand(function (categoryName, x, y) {
var self = Container.call(this);
self.categoryName = categoryName;
var bg = self.attachAsset('categoryButton', {
anchorX: 0.5,
anchorY: 0.5
});
var label = new Text2(categoryName, {
size: 30,
fill: 0xFFFFFF
});
label.anchor.set(0.5, 0.5);
self.addChild(label);
self.x = x;
self.y = y;
self.down = function (x, y, obj) {
currentCategory = self.categoryName;
updatePartSelection();
LK.getSound('select').play();
// Visual feedback
tween(bg, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100
});
tween(bg, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100
});
};
return self;
});
var ColorPicker = Container.expand(function (color, x, y) {
var self = Container.call(this);
self.color = color;
var colorSwatch = self.attachAsset('colorButton', {
anchorX: 0.5,
anchorY: 0.5,
tint: color
});
self.x = x;
self.y = y;
self.down = function (x, y, obj) {
selectedColor = self.color;
LK.getSound('select').play();
// Visual feedback
tween(colorSwatch, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 100
});
tween(colorSwatch, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100
});
};
return self;
});
var LabubuPart = Container.expand(function (partType, assetId) {
var self = Container.call(this);
self.partType = partType;
self.assetId = assetId;
self.isDragging = false;
self.originalX = 0;
self.originalY = 0;
var graphics = self.attachAsset(assetId, {
anchorX: 0.5,
anchorY: 0.5
});
self.setOriginalPosition = function (x, y) {
self.originalX = x;
self.originalY = y;
self.x = x;
self.y = y;
};
self.down = function (x, y, obj) {
self.isDragging = true;
draggedPart = self;
LK.getSound('select').play();
};
return self;
});
var PartSelector = Container.expand(function (partType, assetId, x, y) {
var self = Container.call(this);
self.partType = partType;
self.assetId = assetId;
var bg = self.attachAsset('partButton', {
anchorX: 0.5,
anchorY: 0.5
});
var preview = LK.getAsset(assetId, {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 0.6,
scaleY: 0.6
});
self.addChild(preview);
self.x = x;
self.y = y;
self.down = function (x, y, obj) {
selectedPart = self;
LK.getSound('select').play();
// Visual feedback
tween(bg, {
tint: 0xFFFFFF
}, {
duration: 200
});
tween(bg, {
tint: 0x87CEEB
}, {
duration: 200
});
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xF0F8FF
});
/****
* Game Code
****/
// Game state variables
// Base Labubu body
// Eyes options
// Mouth options
// Ears options
// Accessories
// UI elements
// Sounds
var currentCategory = 'eyes';
var selectedPart = null;
var selectedColor = 0xFFB6C1;
var draggedPart = null;
// Labubu parts data
var partCategories = {
eyes: ['eyes1', 'eyes2', 'eyes3'],
mouth: ['mouth1', 'mouth2', 'mouth3'],
ears: ['ears1', 'ears2', 'ears3'],
accessories: ['hat1', 'bow1', 'glasses1']
};
var colorOptions = [0xFFB6C1, 0xFFE4E1, 0xF0E68C, 0x98FB98, 0x87CEEB, 0xDDA0DD, 0xF5DEB3];
// Current Labubu parts
var currentLabubu = {
body: null,
leftEye: null,
rightEye: null,
mouth: null,
leftEar: null,
rightEar: null,
accessory: null
};
// UI containers
var categoryContainer = new Container();
var partContainer = new Container();
var colorContainer = new Container();
var labubuContainer = new Container();
game.addChild(categoryContainer);
game.addChild(partContainer);
game.addChild(colorContainer);
game.addChild(labubuContainer);
// Position containers
labubuContainer.x = 1024;
labubuContainer.y = 1366;
// Create title
var titleText = new Text2('Labubu Maker', {
size: 80,
fill: 0x4169E1
});
titleText.anchor.set(0.5, 0);
titleText.x = 1024;
titleText.y = 100;
game.addChild(titleText);
// Create Labubu body
function createLabubuBody() {
currentLabubu.body = LK.getAsset('labubuBody', {
anchorX: 0.5,
anchorY: 0.5,
tint: selectedColor
});
labubuContainer.addChild(currentLabubu.body);
}
// Update part based on current selection
function updateLabubuPart(partType, assetId) {
var positions = {
leftEye: {
x: -50,
y: -80
},
rightEye: {
x: 50,
y: -80
},
mouth: {
x: 0,
y: -20
},
leftEar: {
x: -120,
y: -160
},
rightEar: {
x: 120,
y: -160
},
accessory: {
x: 0,
y: -160
}
};
// Remove existing part
if (currentLabubu[partType]) {
labubuContainer.removeChild(currentLabubu[partType]);
}
// Add new part
if (assetId) {
currentLabubu[partType] = LK.getAsset(assetId, {
anchorX: 0.5,
anchorY: 0.5
});
if (positions[partType]) {
currentLabubu[partType].x = positions[partType].x;
currentLabubu[partType].y = positions[partType].y;
}
labubuContainer.addChild(currentLabubu[partType]);
LK.getSound('place').play();
}
}
// Create category buttons
function createCategoryButtons() {
var categories = ['eyes', 'mouth', 'ears', 'accessories'];
var startX = 200;
var startY = 300;
for (var i = 0; i < categories.length; i++) {
var button = new CategoryButton(categories[i], startX, startY + i * 120);
categoryContainer.addChild(button);
}
}
// Create part selection area
function updatePartSelection() {
// Clear existing parts
partContainer.removeChild();
var parts = partCategories[currentCategory];
if (!parts) return;
var startX = 200;
var startY = 800;
for (var i = 0; i < parts.length; i++) {
var x = startX + i % 3 * 120;
var y = startY + Math.floor(i / 3) * 120;
var selector = new PartSelector(currentCategory, parts[i], x, y);
partContainer.addChild(selector);
}
}
// Create color picker
function createColorPicker() {
var startX = 200;
var startY = 1200;
for (var i = 0; i < colorOptions.length; i++) {
var x = startX + i % 4 * 80;
var y = startY + Math.floor(i / 4) * 80;
var picker = new ColorPicker(colorOptions[i], x, y);
colorContainer.addChild(picker);
}
}
// Initialize game elements
createLabubuBody();
createCategoryButtons();
updatePartSelection();
createColorPicker();
// Game event handlers
game.move = function (x, y, obj) {
if (draggedPart) {
var localPos = labubuContainer.toLocal({
x: x,
y: y
});
// Check if dragging over Labubu area
if (Math.abs(localPos.x) < 200 && Math.abs(localPos.y) < 250) {
// Determine part type based on drag position
var partType = null;
if (localPos.y < -140) {
partType = localPos.x < 0 ? 'leftEar' : 'rightEar';
} else if (localPos.y < -60) {
partType = localPos.x < 0 ? 'leftEye' : 'rightEye';
} else if (localPos.y < 20) {
partType = 'mouth';
} else if (localPos.y < -140) {
partType = 'accessory';
}
if (partType && draggedPart.partType === currentCategory) {
// Visual feedback
if (currentLabubu.body) {
currentLabubu.body.alpha = 0.7;
}
}
}
}
};
game.up = function (x, y, obj) {
if (draggedPart) {
var localPos = labubuContainer.toLocal({
x: x,
y: y
});
// Check if dropped over Labubu area
if (Math.abs(localPos.x) < 200 && Math.abs(localPos.y) < 250) {
// Determine part type and update
var partType = null;
if (localPos.y < -140) {
partType = localPos.x < 0 ? 'leftEar' : 'rightEar';
} else if (localPos.y < -60) {
partType = localPos.x < 0 ? 'leftEye' : 'rightEye';
} else if (localPos.y < 20) {
partType = 'mouth';
} else if (localPos.y < -140) {
partType = 'accessory';
}
if (partType && draggedPart.partType === currentCategory) {
updateLabubuPart(partType, draggedPart.assetId);
}
}
// Reset visual feedback
if (currentLabubu.body) {
currentLabubu.body.alpha = 1.0;
}
draggedPart = null;
}
// Handle part selection
if (selectedPart) {
// Apply part to appropriate Labubu locations
if (currentCategory === 'eyes') {
updateLabubuPart('leftEye', selectedPart.assetId);
updateLabubuPart('rightEye', selectedPart.assetId);
} else if (currentCategory === 'ears') {
updateLabubuPart('leftEar', selectedPart.assetId);
updateLabubuPart('rightEar', selectedPart.assetId);
} else if (currentCategory === 'mouth') {
updateLabubuPart('mouth', selectedPart.assetId);
} else if (currentCategory === 'accessories') {
updateLabubuPart('accessory', selectedPart.assetId);
}
selectedPart = null;
}
// Handle color selection
if (selectedColor !== 0xFFB6C1 && currentLabubu.body) {
currentLabubu.body.tint = selectedColor;
// Also tint ears if they exist
if (currentLabubu.leftEar) currentLabubu.leftEar.tint = selectedColor;
if (currentLabubu.rightEar) currentLabubu.rightEar.tint = selectedColor;
}
};
// Instructions
var instructionText = new Text2('Select category, then choose parts!', {
size: 40,
fill: 0x666666
});
instructionText.anchor.set(0.5, 0);
instructionText.x = 1024;
instructionText.y = 200;
game.addChild(instructionText); ===================================================================
--- original.js
+++ change.js
@@ -138,16 +138,16 @@
/****
* Game Code
****/
-// Sounds
-// UI elements
-// Accessories
-// Ears options
-// Mouth options
-// Eyes options
-// Base Labubu body
// Game state variables
+// Base Labubu body
+// Eyes options
+// Mouth options
+// Ears options
+// Accessories
+// UI elements
+// Sounds
var currentCategory = 'eyes';
var selectedPart = null;
var selectedColor = 0xFFB6C1;
var draggedPart = null;
@@ -215,13 +215,13 @@
y: -20
},
leftEar: {
x: -120,
- y: -120
+ y: -160
},
rightEar: {
x: 120,
- y: -120
+ y: -160
},
accessory: {
x: 0,
y: -160
@@ -296,9 +296,9 @@
// Check if dragging over Labubu area
if (Math.abs(localPos.x) < 200 && Math.abs(localPos.y) < 250) {
// Determine part type based on drag position
var partType = null;
- if (localPos.y < -100) {
+ if (localPos.y < -140) {
partType = localPos.x < 0 ? 'leftEar' : 'rightEar';
} else if (localPos.y < -60) {
partType = localPos.x < 0 ? 'leftEye' : 'rightEye';
} else if (localPos.y < 20) {
@@ -324,9 +324,9 @@
// Check if dropped over Labubu area
if (Math.abs(localPos.x) < 200 && Math.abs(localPos.y) < 250) {
// Determine part type and update
var partType = null;
- if (localPos.y < -100) {
+ if (localPos.y < -140) {
partType = localPos.x < 0 ? 'leftEar' : 'rightEar';
} else if (localPos.y < -60) {
partType = localPos.x < 0 ? 'leftEye' : 'rightEye';
} else if (localPos.y < 20) {
Showing 1 to 4 of 4
Images
:quality(85)/https://cdn.frvr.ai/68735efb68418c7cdce8cf62.png%3F3)
Pink labubu no eyes no ears. In-Game asset. 2d. High contrast. No shadows no hair
:quality(85)/https://cdn.frvr.ai/6873609868418c7cdce8cf87.png%3F3)
Labubu eye. In-Game asset. 2d. High contrast. No shadows oval
:quality(85)/https://cdn.frvr.ai/687360de68418c7cdce8cf91.png%3F3)
Pink rabbit ear. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/687361d768418c7cdce8cfa7.png%3F3)
Open happy mouth with round teeth. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/6873621668418c7cdce8cfb2.png%3F3)
Screaming mouth. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/6873626b68418c7cdce8cfbd.png%3F3)
Closed mouth. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/687362b868418c7cdce8cfc9.png%3F3)
Fox ear. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/687362e668418c7cdce8cfd3.png%3F3)
Dog ear. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/6873632768418c7cdce8cfe0.png%3F3)
Glasses. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/687363ff68418c7cdce8d00b.png%3F3)
Bow. In-Game asset. 2d. High contrast. No shadows that you can wear for girls
:quality(85)/https://cdn.frvr.ai/6873643268418c7cdce8d015.png%3F3)
Brown hat. In-Game asset. 2d. High contrast. No shadows
Used plugins
@upit/tween
