Updated to include inventory and craft boxes
This commit is contained in:
parent
8d1b1d8d19
commit
5856c61f67
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
225
src/inventory.js
225
src/inventory.js
|
|
@ -22,7 +22,6 @@ export class InventoryManager {
|
|||
// Add click event to toggle inventory
|
||||
this.backpackIcon.setInteractive();
|
||||
this.backpackIcon.on('pointerdown', () => {
|
||||
console.log('hit');
|
||||
this.toggleInventory();
|
||||
});
|
||||
}
|
||||
|
|
@ -30,19 +29,12 @@ export class InventoryManager {
|
|||
createInventoryUI() {
|
||||
const scene = this.scene;
|
||||
|
||||
// Create inventory background
|
||||
this.inventoryUI = scene.add.rectangle(
|
||||
scene.game.config.width / 2,
|
||||
scene.game.config.height / 2,
|
||||
400,
|
||||
300,
|
||||
0x2F4F4F
|
||||
).setOrigin(0.5).setAlpha(0.9).setScrollFactor(0).setDepth(150);
|
||||
this.inventoryUI = scene.add.image(1130,570,'inventory').setOrigin(0.5).setScrollFactor(0).setDepth(150).setScale(0);
|
||||
|
||||
// Create close button
|
||||
this.closeButton = scene.add.rectangle(
|
||||
scene.game.config.width / 2 + 180,
|
||||
scene.game.config.height / 2 - 130,
|
||||
705,
|
||||
85,
|
||||
30,
|
||||
30,
|
||||
0xFF4444
|
||||
|
|
@ -50,10 +42,14 @@ export class InventoryManager {
|
|||
|
||||
// Add X to close button
|
||||
this.closeButtonText = scene.add.text(
|
||||
scene.game.config.width / 2 + 180,
|
||||
scene.game.config.height / 2 - 130,
|
||||
'X',
|
||||
{ fontSize: '24px', fill: '#FFFFFF' }
|
||||
668,
|
||||
85,
|
||||
'Close X',
|
||||
{
|
||||
fontSize: '24px',
|
||||
fill: '#FFFFFF',
|
||||
fontFamily: 'eraserDust, Arial',
|
||||
}
|
||||
).setOrigin(0.5).setScrollFactor(0).setDepth(150);
|
||||
|
||||
// Hide inventory UI initially
|
||||
|
|
@ -76,26 +72,211 @@ export class InventoryManager {
|
|||
this.scene.player.canMove = false;
|
||||
// Show inventory UI and close button
|
||||
this.inventoryUI.setVisible(true);
|
||||
this.closeButton.setVisible(true);
|
||||
this.closeButtonText.setVisible(true);
|
||||
this.backpackIcon.setVisible(false);
|
||||
this.scene.tweens.add({
|
||||
targets: this.inventoryUI,
|
||||
scale: 1,
|
||||
angle: 360,
|
||||
duration: 400,
|
||||
x: 640,
|
||||
y: 360,
|
||||
onComplete: ()=> {
|
||||
this.closeButton.setVisible(true);
|
||||
this.closeButtonText.setVisible(true);
|
||||
this.showInventory();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Hide inventory UI and close button
|
||||
this.inventoryUI.setVisible(false);
|
||||
this.closeButton.setVisible(false);
|
||||
this.closeButtonText.setVisible(false);
|
||||
this.scene.time.delayedCall(200, () => {
|
||||
this.scene.player.canMove = true;
|
||||
this.backpackIcon.setVisible(true);
|
||||
|
||||
// Destroy all items in the inventory display group
|
||||
if (this.inventoryDisplay) {
|
||||
this.inventoryDisplay.clear(true, true); // Clear group and destroy children
|
||||
}
|
||||
|
||||
this.scene.tweens.add({
|
||||
targets: this.inventoryUI,
|
||||
scale: 0,
|
||||
angle: 360,
|
||||
duration: 400,
|
||||
x: 1130,
|
||||
y: 570,
|
||||
onComplete: () => {
|
||||
this.inventoryUI.setVisible(false);
|
||||
this.scene.player.canMove = true;
|
||||
this.inventoryDisplay = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showInventory() {
|
||||
// Add X to close button
|
||||
this.inventoryBG = this.scene.add.rectangle(
|
||||
225,
|
||||
195,
|
||||
820,
|
||||
200,
|
||||
0x000000,
|
||||
.6
|
||||
).setOrigin(0).setScrollFactor(0).setDepth(155).setAlpha(0.6);
|
||||
|
||||
this.inventoryCraftOne = this.scene.add.image(225,405, 'craftDrop').setOrigin(0).setScrollFactor(0).setDepth(156);
|
||||
this.inventoryCraftTwo = this.scene.add.image(450,405, 'craftDrop').setOrigin(0).setScrollFactor(0).setDepth(156);
|
||||
|
||||
// Add circular button with plus symbol between craft slots
|
||||
this.craftButton = this.scene.add.circle(
|
||||
437, // Centered between the two craft slots (225 + 225)/2 = 225, but we want it at x=337.5 which is halfway between both slots
|
||||
475,
|
||||
40, // 100px diameter circle
|
||||
0x00FF00, // Green color for the button
|
||||
0.6 // Alpha .6
|
||||
).setOrigin(0.5).setScrollFactor(0).setDepth(157);
|
||||
|
||||
this.craftButtonText = this.scene.add.text(
|
||||
437,
|
||||
475,
|
||||
'Craft',
|
||||
{
|
||||
fontSize: '28px',
|
||||
fill: '#FFFFFF',
|
||||
fontFamily: 'eraserDust, Arial',
|
||||
}
|
||||
).setOrigin(0.5).setScrollFactor(0).setDepth(158);
|
||||
|
||||
// Make the button interactive
|
||||
this.craftButton.setInteractive();
|
||||
this.craftButton.on('pointerdown', () => {
|
||||
console.log('Craft button clicked');
|
||||
// Add craft functionality here
|
||||
});
|
||||
|
||||
// Display inventory items
|
||||
let yPosition = 215;
|
||||
let xStart = 245;
|
||||
let row = 0;
|
||||
|
||||
this.inventoryDisplay = this.scene.physics.add.group();
|
||||
this.inventoryDisplay.add(this.inventoryBG);
|
||||
this.inventoryDisplay.add(this.craftButton);
|
||||
this.inventoryDisplay.add(this.craftButtonText);
|
||||
this.inventoryDisplay.add(this.inventoryCraftOne);
|
||||
this.inventoryDisplay.add(this.inventoryCraftTwo);
|
||||
|
||||
for (const [itemType, itemData] of Object.entries(this.inventory)) {
|
||||
const { amount, sprite } = itemData;
|
||||
|
||||
// Create sprite
|
||||
const itemSprite = this.scene.physics.add.sprite(xStart, yPosition, 'objects', sprite)
|
||||
.setOrigin(0.5)
|
||||
.setScale(0.5)
|
||||
.setScrollFactor(0)
|
||||
.setDepth(160);
|
||||
|
||||
// Make the item draggable
|
||||
itemSprite.setInteractive();
|
||||
this.scene.input.setDraggable(itemSprite);
|
||||
|
||||
// Add drag events
|
||||
itemSprite.on('dragstart', (pointer, dragX, dragY) => {
|
||||
// Bring to front when dragging
|
||||
itemSprite.setDepth(200);
|
||||
|
||||
// Create a temporary visual clone for dragging
|
||||
this.dragClone = this.scene.add.sprite(dragX, dragY, 'objects', sprite)
|
||||
.setOrigin(0.5)
|
||||
.setScale(0.5)
|
||||
.setScrollFactor(0)
|
||||
.setDepth(210);
|
||||
});
|
||||
|
||||
itemSprite.on('drag', (pointer, dragX, dragY) => {
|
||||
// Move the clone with the mouse
|
||||
if (this.dragClone) {
|
||||
this.dragClone.setPosition(dragX, dragY);
|
||||
}
|
||||
});
|
||||
|
||||
itemSprite.on('dragend', (pointer, dragX, dragY) => {
|
||||
// Remove the clone
|
||||
if (this.dragClone) {
|
||||
this.dragClone.destroy();
|
||||
this.dragClone = null;
|
||||
}
|
||||
|
||||
// Reset item depth
|
||||
itemSprite.setDepth(160);
|
||||
|
||||
// Check if dropped on a craft slot
|
||||
const craftOneBounds = this.inventoryCraftOne.getBounds();
|
||||
const craftTwoBounds = this.inventoryCraftTwo.getBounds();
|
||||
|
||||
if (Phaser.Geom.Rectangle.ContainsPoint(craftOneBounds, pointer.position)) {
|
||||
console.log(`Dropped ${itemType} onto Craft Slot 1`);
|
||||
// Handle drop on craft slot 1
|
||||
} else if (Phaser.Geom.Rectangle.ContainsPoint(craftTwoBounds, pointer.position)) {
|
||||
console.log(`Dropped ${itemType} onto Craft Slot 2`);
|
||||
// Handle drop on craft slot 2
|
||||
}
|
||||
});
|
||||
|
||||
// Create item name text
|
||||
const itemName = this.scene.add.text(
|
||||
xStart + 40,
|
||||
yPosition - 10,
|
||||
itemType.charAt(0).toUpperCase() + itemType.slice(1),
|
||||
{
|
||||
fontSize: '16px',
|
||||
fill: '#FFFFFF',
|
||||
fontFamily: 'eraserDust, Arial',
|
||||
}
|
||||
).setOrigin(0).setScrollFactor(0).setDepth(160);
|
||||
|
||||
// Create quantity text
|
||||
const itemQuantity = this.scene.add.text(
|
||||
xStart + 40,
|
||||
yPosition + 15,
|
||||
`x${amount}`,
|
||||
{
|
||||
fontSize: '14px',
|
||||
fill: '#FFFF00',
|
||||
fontFamily: 'eraserDust, Arial',
|
||||
}
|
||||
).setOrigin(0).setScrollFactor(0).setDepth(160);
|
||||
|
||||
this.inventoryDisplay.add(itemSprite);
|
||||
this.inventoryDisplay.add(itemName);
|
||||
this.inventoryDisplay.add(itemQuantity);
|
||||
|
||||
// Move to next row
|
||||
yPosition += 50;
|
||||
row ++;
|
||||
if (row === 3) {
|
||||
row = 0;
|
||||
yPosition = 215;
|
||||
xStart += 200;
|
||||
}
|
||||
}
|
||||
|
||||
// Make craft slots interactive for drop targets
|
||||
this.inventoryCraftOne.setInteractive();
|
||||
this.inventoryCraftTwo.setInteractive();
|
||||
}
|
||||
|
||||
addItem(item) {
|
||||
const type = item.props.type;
|
||||
const amount = item.props.amount;
|
||||
const sprite = item.props.sprite;
|
||||
if (type in this.inventory) {
|
||||
this.inventory[type] += amount;
|
||||
this.inventory[type].amount += amount;
|
||||
} else {
|
||||
this.inventory[type] = amount;
|
||||
this.inventory[type] = {
|
||||
amount: amount,
|
||||
sprite: sprite
|
||||
}
|
||||
}
|
||||
this.scene.tweens.add({
|
||||
targets: this.backpackIcon,
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const config = {
|
|||
},
|
||||
backgroundColor: '#000000',
|
||||
scene: [
|
||||
MenuScene,
|
||||
//MenuScene,
|
||||
// Intro,
|
||||
// Tutorial,
|
||||
Game
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ export class ObjectManager {
|
|||
type: key,
|
||||
health: 1,
|
||||
fullHealth: 1,
|
||||
yield: 'seaShell',
|
||||
yield: 'glass',
|
||||
amount: [1,1],
|
||||
doneSprite: null,
|
||||
dropSprite: 18
|
||||
|
|
@ -255,7 +255,8 @@ export class ObjectManager {
|
|||
this.scene.items.add(drop);
|
||||
drop.props = {
|
||||
type: object.props.yield,
|
||||
amount: amount
|
||||
amount: amount,
|
||||
sprite: sprite
|
||||
};
|
||||
drop.setInteractive();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@ export class Game extends Phaser.Scene {
|
|||
// Images
|
||||
this.load.image('terrain-tileset', 'assets/images/terrain.png');
|
||||
this.load.image('backpack', 'assets/images/backpack.png');
|
||||
|
||||
this.load.image('inventory', 'assets/images/inventory.png');
|
||||
this.load.image('craftDrop', 'assets/images/craftDrop.png');
|
||||
// FX
|
||||
this.load.audio('chop', 'assets/fx/chop.mp3');
|
||||
this.load.audio('zip', 'assets/fx/zip.mp3');
|
||||
|
|
|
|||
|
|
@ -48,16 +48,16 @@ export class MenuScene extends Phaser.Scene {
|
|||
const logo = this.physics.add.image(610, 225, 'logo').setScale(0).setOrigin(0.5);
|
||||
this.tweens.add({
|
||||
targets: logo,
|
||||
angle: 360,
|
||||
scale: .65,
|
||||
duration: 3500,
|
||||
ease: 'Bounce',
|
||||
ease: 'Quad',
|
||||
onComplete: () => {
|
||||
this.tweens.add({
|
||||
targets: logo,
|
||||
scale: .7,
|
||||
y: 250,
|
||||
yoyo: true,
|
||||
ease: 'Linear',
|
||||
repeat: -1,
|
||||
duration: 3000
|
||||
});
|
||||
|
|
@ -68,7 +68,7 @@ export class MenuScene extends Phaser.Scene {
|
|||
{
|
||||
fontFamily: 'eraserDust, Arial',
|
||||
fontSize: '32px',
|
||||
color: '#ffffff',
|
||||
color: '#acff93ff',
|
||||
align: 'center'
|
||||
}
|
||||
);
|
||||
|
|
@ -80,7 +80,7 @@ export class MenuScene extends Phaser.Scene {
|
|||
{
|
||||
fontFamily: 'eraserDust, Arial',
|
||||
fontSize: '32px',
|
||||
color: '#ffffff',
|
||||
color: '#f1a9ffff',
|
||||
align: 'center'
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue