Jump to content


Some screenshots from my Javascript/Canvas puzzle game.


4 replies to this topic

#1 geon

    Senior Member

  • Members
  • PipPipPipPip
  • 939 posts

Posted 02 March 2013 - 09:25 PM

github: https://github.com/geon/flup

Pics

Characters fully "flared".
Owl character in the middle of wing flap animation, shattered gems.
Sprite sheets

What is it?

A rather traditional puzzle game à la Tetris, Columns, Super Puzzle Fighter 2X, etc. You drop colored pieces into a grid, where you need to line up matching colors to remove them. You play against an opponent, and pieces are added to your grid when the opponent scores, and vice versa. Wholesome fun for the whole family.

What's new?

First of all, I ditched the old cute robot characters. I really liked how they turned out, but they were way too labor intensive to make, and the messy pen & paper style (which is all I can draw) didn't work at all with the shiny gem sprites I already had. And I love those gems.

Instead I realized I can use Aztec gold idols, based on actual photos and just do some heavy photoshopping, just like how I made the gems. The gold idols even makes sense as a general theme; they are protecting the gems in their temple from raiders. Not very original (Zuma comes to mind), but I feel it works really well.

I added basic functionality for having the characters next to their boards, and displaying some animation. The animations are not yet liked to the events in the game, but just looping over and over.

I've also improved the layout a bit, and added a background.

#2 fireside

    Senior Member

  • Members
  • PipPipPipPip
  • 1586 posts

Posted 02 March 2013 - 11:00 PM

Perhaps you can use the robot characters in a different game. I'm sure they are hard to animate, but could be used for prototype art if you decide to take up modeling like with Blender. They would be great enemy characters in a platformer or something.
Currently using Blender and Unity.

#3 geon

    Senior Member

  • Members
  • PipPipPipPip
  • 939 posts

Posted 03 March 2013 - 12:03 AM

View Postfireside, on 02 March 2013 - 11:00 PM, said:

I'm sure they are hard to animate

Well, if you use something like Spine, it shouldn't be too hard (compared to drawing them frame by frame). I have all the parts isolated in separate layers in Photoshop already.

#4 TheNut

    Senior Member

  • Moderators
  • 1695 posts
  • LocationThornhill, ON

Posted 03 March 2013 - 03:51 PM

Your boombot reminds me of Johnny Five :D

Personally I would lean more towards vector graphics than photographs, which tend to look out of place in a game IMO. If I like the shape, I'll try to use the raster->vector converter in Inkscape, but if the results come out poor I resort to tracing a 3D model in Blender and render the model using a toon shader. It's a personal preference of mine, but I think a cartoon colour palette goes well for these sort of games.

Posted Image

Here's a web based puzzle game similar to bejewelled I'm working on in my spare time. I decided to stick with a simple colour palette just because it feels more casual to me. More relaxing I suppose you could say.

Judging by the timestamps in github, I assume you're doing this project on the side as well? I see you rejected using 3rd party engines. I haven't looked a whole lot into other web engines, but some that I did check I disliked their design choices. I don't regret spending the time porting my c++ framework over to JS because the workflow is just so much more natural to application development. Judging by your code on github, it looks like you're just going straight into game dev, but it might be worth spending a bit of extra time to write yourself a nice framework.

How do you plan on tackling web sockets? Are you going to write your own C++ server or consider using node.js? As another part time project, I've been creating a lightweight web socket server in C++ with LUA scripting support. Most web based multiplayer games I envision the server will simply act as a mediator forwarding messages, but I left the LUA option on the table should I feel the server needs to perform logic of its own (mostly player accounts / logins). I'm not sure on the performance impact though, so I may revert to using a classic DLL plug-in style architecture instead once I get around to running some tests.
http://www.nutty.ca - Being a nut has its advantages.

#5 geon

    Senior Member

  • Members
  • PipPipPipPip
  • 939 posts

Posted 06 March 2013 - 04:29 PM

View PostTheNut, on 03 March 2013 - 03:51 PM, said:

Your boombot reminds me of Johnny Five :D

Heh. Haven't seen that before, but it is similar.


View PostTheNut, on 03 March 2013 - 03:51 PM, said:

Judging by the timestamps in github, I assume you're doing this project on the side as well?


Yup. Purely for fun. I've been doing some client-code heavy webdev recently so I thought I should try writing a game in js. It feels pretty good so far. With Canvas, I don't have to mess around with the DOM, which I feel really isn't suitable for games. I might build the menu system with HTML, though. That should make it easier to handle clicks, etc.

View PostTheNut, on 03 March 2013 - 03:51 PM, said:

I see you rejected using 3rd party engines. I haven't looked a whole lot into other web engines, but some that I did check I disliked their design choices.


Yes. I did look around before starting. I kind of liked Cocos2D, which has a js port, but the documentation sucked/did not exist at all. But most importantly, most engines seems to be aimed at a specific type of game, like a tile-based world, or physics driven game entities with collision detection. I don't need/want any of that. I saw some sprite sheet interface that looked nice, and I used that as an inspiration and built my own sprite sheet object.

View PostTheNut, on 03 March 2013 - 03:51 PM, said:

I don't regret spending the time porting my c++ framework over to JS because the workflow is just so much more natural to application development. Judging by your code on github, it looks like you're just going straight into game dev, but it might be worth spending a bit of extra time to write yourself a nice framework.


Yeah. I don't really feel that I know what I will be needing later, so I figured I'll start working on it and refactor as I go. I have only made 5 games before, and none in Javascript. I also want to take the opportunity to really write idiomatic js, rather than just port something 1:1 from C++.

For example, the App object will ask all other classes to load their Spritesheet object. The Spritesheet object returns a Promise (jQuery promises so far, but I might switch to CommonJS promises later if I need the features), and the app will wait for these promises to be fulfilled before it launches the game.


View PostTheNut, on 03 March 2013 - 03:51 PM, said:

How do you plan on tackling web sockets? Are you going to write your own C++ server or consider using node.js?

I'll be using node.js, and socket.io. A major reason for running js on the server is that I can run the exact same code on both sever and client in parallell. Without it, conflicts would be very difficult to resolve, and cheating would be easy.


View PostTheNut, on 03 March 2013 - 03:51 PM, said:

As another part time project, I've been creating a lightweight web socket server in C++ with LUA scripting support. Most web based multiplayer games I envision the server will simply act as a mediator forwarding messages, but I left the LUA option on the table should I feel the server needs to perform logic of its own (mostly player accounts / logins). I'm not sure on the performance impact though, so I may revert to using a classic DLL plug-in style architecture instead once I get around to running some tests.

Cool! I have been wanting to look at lua+C/C++ for some time, but I don't really like the language much. Plus I don't really have anything than needs the speed of C. Heck! My game is running at a steady 60 FPS with hundreds of scaled sprites, even on my iPhone, with 100% Javascript...





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users