MoonsideGames
/
AnimationTool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

< > frame input. Down resets

master
Beau Blyth 2019-09-26 16:28:35 -07:00
parent 70d0828125
commit 1574fd0f6b
5 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/canvas_handler.ts
View File

@ -4,18 +4,14 @@ export class CanvasHandler {
constructor(currentImageDiv: HTMLElement) { constructor(currentImageDiv: HTMLElement) {
this.currentImageDiv = currentImageDiv; this.currentImageDiv = currentImageDiv;
console.log(this.currentImageDiv);
} }
public Load() { public Load() {
this.currentImageDiv.addEventListener('onmousedown', this.clickOnImage); const mouseDown = (event: MouseEvent) => {
this.currentImageDiv.addEventListener('onmouseover', this.hoverOverImage); console.log(event.x + ' ' + event.y);
}
private hoverOverImage() {
console.log('hovering over image');
}
private clickOnImage = (e: Event) => {
console.log('Clicked on image');
}; };
this.currentImageDiv.addEventListener('mousedown', mouseDown);
}
} }

13
app/frame_handler.ts
View File

@ -4,10 +4,18 @@ export class FrameHandler {
private filenames: string[] = []; private filenames: string[] = [];
private currentFrame: number = 0; private currentFrame: number = 0;
private currentImageDiv: HTMLElement; private currentImageDiv: HTMLElement;
private playingAnimation: boolean;
constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) { constructor(currentImageDiv: HTMLElement, frameNumberDiv: HTMLElement) {
this.currentImageDiv = currentImageDiv; this.currentImageDiv = currentImageDiv;
this.frameNumberDiv = frameNumberDiv; this.frameNumberDiv = frameNumberDiv;
setTimeout(this.Update, 1000 / 60);
}
public Update() {
console.log('updating');
AdvanceFrames(1);
setTimeout(this.Update, 1000 / 60);
} }
public GetCurrentFrame(): number { public GetCurrentFrame(): number {
@ -45,4 +53,9 @@ export class FrameHandler {
'Frame ' + this.currentFrame.toString() + ' / ' + (this.filenames.length - 1).toString(); 'Frame ' + this.currentFrame.toString() + ' / ' + (this.filenames.length - 1).toString();
} }
} }
public TogglePlayingAnimation() {
this.playingAnimation = !this.playingAnimation;
console.log('playingAnimation = ', this.playingAnimation);
}
} }

20
app/page.ts
View File

@ -48,19 +48,31 @@ export class Page {
const keyDown = (event: KeyboardEvent) => { const keyDown = (event: KeyboardEvent) => {
switch (event.keyCode) { switch (event.keyCode) {
case 39: { case 39:
// right_arrow case 190: {
// right_arrow, carrot
console.log('next frame action'); console.log('next frame action');
this.frameHandler.AdvanceFrames(1); this.frameHandler.AdvanceFrames(1);
break; break;
} }
case 37: { case 37:
// left arrow case 188: {
// left arrow, carrot
console.log('previous frame action'); console.log('previous frame action');
this.frameHandler.AdvanceFrames(-1); this.frameHandler.AdvanceFrames(-1);
break; break;
} }
case 40: {
// down arrow
this.frameHandler.GoToFrame(0);
}
case 32: {
// spacebar
this.frameHandler.TogglePlayingAnimation();
}
} }
}; };

9
dist/assets/stylesheets/main.css vendored
View File

@ -35,8 +35,8 @@ body {
} }
#currentImage { #currentImage {
width: 50%; width: 256;
height: 50%; height: 256;
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated; image-rendering: pixelated;
} }
@ -48,10 +48,5 @@ body {
min-width: 256; min-width: 256;
min-height: 256; min-height: 256;
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges; image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
} }

14
dist/index.html vendored
View File

@ -7,19 +7,27 @@
<link rel="stylesheet" href="assets/stylesheets/main.css"> <link rel="stylesheet" href="assets/stylesheets/main.css">
</head> </head>
<body> <body>
<div id="dropZone"> <div id="dropZone">
<div id = "topbar">
<div id="instructions" class="instruction"> <div id="instructions" class="instruction">
<p>Drag images onto the page to upload them. Advance frames with arrow keys</p> <p>Drag images onto the page to upload them. Advance frames with arrow keys</p>
</div> </div>
<div id="output"></div> </div>
<div id="frameNumber" class="warning"> <div id="frameNumber" class="warning">
<p></p> <p></p>
</div> </div>
<!-- canvas --> <!-- canvas -->
<div id="currentImage"> <div id="currentImage">
<img alt=""> <img alt="No images uploaded">
</div>
<div id="settings">
Origin X: <input type="text" name="originX" value="0" size="2">
Y: <input type="text" name="originX" value="0" size="2"><br>
Fps: <input type="text" name="FirstName" value="60"><br>
<input type="checkbox" name="looping" > Looping <br>
<button type="button" onclick="alert('saved')">export .anim</button>
</div> </div>
</div> </div>