Inspiration
We wanted to make something fun and simple for our first ever web-based application, and our goal was mostly to learn about animation, Javascript, the HTML5 canvas, Easel.js, and web-development in general. One of our members had absolutely no experience in web-development!
What it does
Allows users to choose from several hand-crafted models,backgrounds and effects, to drag-and drop into their own AnimaCard!
How we built it
We used the HTML5 canvas element in combination with Easel.js API to display animated sprites. We added drag and drop capabilities for simple use, and a very simple interface to choose and create new elements. All animations are done using Javascript, and all spritesheets were drawn by hand on Gimp.
Challenges we ran into
We stayed up all night working on a feature that would have allowed users to create straight-line paths for their animations by setting way-point markers. The scope of this was much larger than we anticipated, and our solution was gaining very little ground. Due to time constraints and lack of sleep, we had to abandon the feature.
Accomplishments that we're proud of
Our first ever web-based application and Hackathon of course! From learning the bare-minimum of HTML, CSS, and Javascript and 12PM yesterday, to now having something to show off! We were so excited when we finally got our sprites to animate on screen, and even more when we managed to enable drag and drop!
What we learned
Apart from learning an absolute ton about web-development in general, we specifically learned how to create sprite sheets in Gimp, how to utilize those sprite sheets with Easel.js, how to use the HTML5 canvas element, how to design web-pages, and that caffeine is a hackers best friend.
What's next for AnimaCard-Builder
Saving and sharing capabilities, 30fps, more models, animations and effects. Eventually, with more experience, we might re-visit that user-defined animation feature that we worked so hard on, but never got to finish.
Log in or sign up for Devpost to join the conversation.