How to make a character generator using sprite sheet and JavaScript

Question

http://www.famitsu.com/freegame/tool/chibi/index1.html

I want to build a character generator exactly like this one. Someone suggested me that it'd be easy to use a canvas library, followed by low level JavaScript programming. Some said I don't need canvas and can do it easily with JavaScript. Since I've only learnt core JavaScript so far, hence I really don't have any knowledge or idea about this scene. So can you suggest me where and how to start this project of mine? And what are the required languages I should acquire first before jumping onto this project?

*"how to start this project of mine?"* - [Just do it](https://www.youtube.com/watch?v=ZXsQAXx_ao0). I suggest you start by drawing your sprites first. — Joseph, Jan 05 '16 at 16:20
I would definitely recommend using the canvas element. It was *built* for drawing! It will require a little bit of understanding of how the animation loop works, but this would also set you up for learning how to do the same thing in other languages. This will teach you about the animation loop: http://www.kirupa.com/html5/animating_with_requestAnimationFrame.htm And this will teach you how to throttle it to a certain FPS: http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/ — Taylor Lopez, Jan 05 '16 at 16:23
Your starting place will also depend on how your brain works. I know for myself, I like to get something that _works_ ___before___ I make it pretty, so I'll start by getting a "playable prototype" working before spending a lot of time on graphics. That usually entails a lot of colored squares or circles flying around for a while. But if working on the graphics will help you better understand how you want something to work, then start there. — Taylor Lopez, Jan 05 '16 at 16:27
@JosephtheDreamer I'm done with drawing sprites. And thanks for the link. — shiftervii, Jan 05 '16 at 16:43
@iAmMortos I am really not bothered with the graphics as I have already done it. It's the implementation that is bothering me the most. — shiftervii, Jan 05 '16 at 16:44
@shiftervii I would start with some basic canvas tutorials that will teach you how to draw and fill and use paths and stuff like that, but what will probably come in handy most is drawing images (http://www.w3schools.com/tags/canvas_drawimage.asp). Pair that with the animation loop link from before, and you'll be able to animate your sprites! Then, with a little bit of interactivity programming (aka detecting clicks: http://www.homeandlearn.co.uk/JS/html5_canvas_mouse_events.html) you have all the components you need for a full-fledged game/application in JavaScript! — Taylor Lopez, Jan 05 '16 at 17:03
@iAmMortos It seems like I have to start learning HTML canvas first. Will bother you guys again when I'll be starting the JavaScript part of the project. Cheers! — shiftervii, Jan 05 '16 at 17:17

score 0 · Answer 1 · edited May 23 '17 at 10:28

The components of an interactive, graphic application:

Something on which to draw (canvas)
Something to draw (graphics)
Looping drawing logic (animation loop and how to throttle it)
The game/application's functionality (game loop)
Interactivity (event listeners that can react to key presses, clicks, etc.)
Sound effects and music

These things are the basic building blocks of any interactive, graphic application.

JavaScript is a great language to use when starting out (or even beyond that) because the same concepts apply here as anywhere else, but you can save your code, and run it in your favorite browser!

Here's a Tetris example I've been working on lately in JavaScript that draws the board on an HTML5 canvas. It may seem a little complicated and overwhelming, but all the pieces are there that I've discussed (except for sound =/).

Just for reference, the tick function is my main animation loop. It runs as fast as the window will return animation frames, which is usually quicker than necessary. Once the tick function is called once, it will continue to run until explicitly stopped.

Tet.prototype.tick = function()
{
  var _self = this; // needed for next step
  // This line is what will make this function run repeatedly
  this.requestId = requestAnimationFrame(function(){_self.tick()});

  // Get some time information
  this.tickNow = Date.now();
  this.tickDelta = this.tickNow - this.tickThen;

  // If it's been long enough, and it's time to draw a frame...
  if (this.tickDelta > this.tickInterval)
  {
    this.tickThen = this.tickNow - (this.tickDelta % this.tickInterval);

    // Run the game loop
    this.doGameLoop();

    // Draw the updated board
    this.renderer.drawBoard(this.data, this.curPiece, this.curPieceGuide);
  }
}

Game making can be intimidating at first, because it seems there are SO MANY pieces that need to be understood before you can accomplish what you see in your head, but if you take the concepts one-at-a-time, and start small, you'll be making crazy stuff in no time!

Not making a game. http://www.revelore.com/ ^the website I'm trying to make. Its a single page web application where users can write and share their stories and also can add characters in their stories by the help of this character generator. — shiftervii, Jan 05 '16 at 19:56
Aha. So even if there's _no_ animation, I would say that the canvas is still the best way to go. If you built the "image" out of carefully positioned HTML elements, it would work, but you can't save it as an image on your computer. When you right click on a canvas element, you can save it as an image directly. Very convenient! — Taylor Lopez, Jan 05 '16 at 21:16
So I'll start with learning HTML5 canvas first then! Exclude the animation part. — shiftervii, Jan 05 '16 at 22:20

How to make a character generator using sprite sheet and JavaScript

1 Answers1