Skip to content

Resizable and copyable objects in Level Editor #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gitjuba merged 3 commits into from
Jul 16, 2019
Merged

Resizable and copyable objects in Level Editor #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb9db7b
Add keyboard controls to resize objects.
gitjuba May 16, 2019
5c2ada3
Add copying of level objects to Level Editor.
gitjuba Jul 16, 2019
b3dc6e8
Update README. It didn't really make sense.
gitjuba Jul 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ A (for now extremely) minimalistic platformer written in JavaScript.

## Usage

Run `npm install` to install dependencies. Then open `dist/index.html` in a browser.
To play, open `dist/index.html` in a browser. To develop, run `npm install` to install dependencies and `npm run dev` to build the Webpack bundle (watches for changes in source files and re-builds automatically). And `npm test` to run the little test suite.

## Gameplay goal I (done)

Expand Down
80 changes: 69 additions & 11 deletions src/level-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default function LevelEditor(onStateChange, initParams) {
this.newObjectType = Objects.OBSTACLE;
this.deleteObject = false;

this.mouseDown = false;
this.mouseX = 0;
this.mouseY = 0;
this.dragOffsetX = 0;
Expand Down Expand Up @@ -107,6 +108,53 @@ export default function LevelEditor(onStateChange, initParams) {
case 16: // shift
this.deleteObject = true;
break;
// 'y', 'h' and 'j', 'k' adjust width and height of object
case 89: // 'y',
if (this.selectedObject !== undefined) {
const obj = this.levelObjects[this.selectedObject];
if (obj.type === Objects.OBSTACLE) {
obj.y -= 10;
obj.h += 10;
}
}
break;
case 72: // 'h'
if (this.selectedObject !== undefined) {
const obj = this.levelObjects[this.selectedObject];
if (obj.type === Objects.OBSTACLE && obj.h > 10) {
obj.y += 10;
obj.h -= 10;
}
}
break;
case 74: // 'j',
if (this.selectedObject !== undefined) {
const obj = this.levelObjects[this.selectedObject];
if (obj.type === Objects.OBSTACLE && obj.w > 10) {
obj.w -= 10;
}
}
break;
case 75: // 'k'
if (this.selectedObject !== undefined) {
const obj = this.levelObjects[this.selectedObject];
if (obj.type === Objects.OBSTACLE) {
obj.w += 10;
}
}
break;
case 67: // 'c' copies selected object
if (this.selectedObject !== undefined) {
const obj = this.levelObjects[this.selectedObject];
if (obj.type === Objects.OBSTACLE) {
const clone = _.cloneDeep(obj);
clone.x += 10;
clone.y += 10;
this.levelObjects.push(clone);
this.selectedObject = this.levelObjects.length - 1;
}
}

default:
console.log('key pressed: ' + e.keyCode);
break;
Expand All @@ -124,20 +172,23 @@ export default function LevelEditor(onStateChange, initParams) {
mousemove: e => {
this.mouseX = e.clientX - this.globalOffset.x;
this.mouseY = e.clientY - this.globalOffset.y;
if (this.selectedObject !== undefined) {
this.levelObjects[this.selectedObject].x = this.snapToGrid(this.mouseX - this.dragOffsetX);
this.levelObjects[this.selectedObject].y = this.snapToGrid(this.mouseY - this.dragOffsetY);
} else if (this.newObject !== undefined) {
if (this.newObjectType === Objects.OBSTACLE) {
this.newObject.w = this.snapToGrid(this.mouseX - this.newObject.x);
this.newObject.h = this.snapToGrid(this.mouseY - this.newObject.y);
} else {
this.newObject.x = this.snapToGrid(this.mouseX);
this.newObject.y = this.snapToGrid(this.mouseY);
if (this.mouseDown) {
if (this.selectedObject !== undefined) {
this.levelObjects[this.selectedObject].x = this.snapToGrid(this.mouseX - this.dragOffsetX);
this.levelObjects[this.selectedObject].y = this.snapToGrid(this.mouseY - this.dragOffsetY);
} else if (this.newObject !== undefined) {
if (this.newObjectType === Objects.OBSTACLE) {
this.newObject.w = this.snapToGrid(this.mouseX - this.newObject.x);
this.newObject.h = this.snapToGrid(this.mouseY - this.newObject.y);
} else {
this.newObject.x = this.snapToGrid(this.mouseX);
this.newObject.y = this.snapToGrid(this.mouseY);
}
}
}
},
mousedown: e => {
this.mouseDown = true;
this.selectedObject = this.getObjectUnderCursor();
if (this.selectedObject !== undefined) {
if (this.deleteObject) {
Expand All @@ -164,7 +215,7 @@ export default function LevelEditor(onStateChange, initParams) {
}
},
mouseup: () => {
this.selectedObject = undefined;
this.mouseDown = false;
if (this.newObject !== undefined) {
if (this.checkDimensions(this.newObject)) {
this.levelObjects.push(this.newObject);
Expand All @@ -190,6 +241,7 @@ export default function LevelEditor(onStateChange, initParams) {

this.drawHelperLines = function(ctx) {
ctx.strokeStyle = 'lightgreen';
ctx.setLineDash([]);
// divide to quadrants
ctx.lineWidth = 2;
ctx.beginPath();
Expand Down Expand Up @@ -247,5 +299,11 @@ export default function LevelEditor(onStateChange, initParams) {
ctx.fillStyle = this.getFillStyle(this.newObject.type);
ctx.fillRect(this.newObject.x, this.newObject.y, this.newObject.w, this.newObject.h);
}
if (this.selectedObject !== undefined) {
const obj = this.levelObjects[this.selectedObject];
ctx.strokeStyle = '#f0f';
ctx.setLineDash([5, 10])
ctx.strokeRect(obj.x - 5, obj.y - 5, obj.w + 10, obj.h + 10);
}
};
}