Skip to main content

early stages of development

DISCLAIMER: I've never made a beat em up game before.


I wanted to go through and figure things out before I write the tutorial. (Makes sense right?)

I've got a decent start on things so far.


  • The solid white square is the X and Y of the player entity.
  • The hollow white square is the bounds of the player sprite's actual raster image buffer.
  • The orange horizontal line is the center Y level of the player
  • The blue vertical line is the center X of the player
  • The cyan vertical lines are quarter divisions used to place the collision hitboxes when facing left or right.
  • The green rectangle is the hitbox of the player which will receive damage. It's size and placement changes based on the current animation.

  • There are 2 red hitboxes which are the damage-dealing hitboxes that will be used to tell when the player punches or kicks something.
  • Ignore the crazy continuously animated guy. That was a test entity that I was using to test the animation engine that I built.

What you see above is the result of about a day of coding without any references. And comprised of the following classes:
  • Actor
  • AnimatedSprite
  • Animation
  • AnimationSequence
  • AnimationTrigger
  • Backdrop
  • Entity
  • Input
  • Keyboard
  • Player
  • Stage
  • Ticker
I am building things in a modular and reusable fashion. I'll probably release the "engine" separately so that it can drive other projects easily.

Features I've built here so far are:
  • Basic 2D depth-sorted sprite rendering engine using HTML5 Canvas API
  • Simple audio playback system using HTML5 Web Audio API
  • 2D frame-based sequenced sprite animation engine
  • Handles Keyboard input
There are lots of bugs still, like the background shifting off the screen when I walk left. Early camera system needs to be completely rewritten. The animation sequencer currently cannot handle linking the same animation together. So I gotta solve why that is.

Not really a bug, but a feature: At this time the player cannot jump. And I'm probably going to keep things that way so I don't have to go animate and render additional sprite frames. 😜

There is still a lot for me to figure out here, but it's off to a good start. My next focus is probably going to be throwing in destructible objects (The crate & trashcan seen in the last post) which will require a collision detection system, among other things.

Stay tuned for more game programming adventures!

Comments

Post a Comment

Popular posts from this blog

The adventure begins

Hi. I'm Richard Marks and I'm going to be writing about game programming on this little blog here. More importantly, I'm going to be writing tutorials and stuff to teach you, how to make a game. The first tutorial/course can be found here  https://richardmarks.github.io/gpa-box-avoider/ The mini game project that the course was based on can be found here  http://play-box-avoider.surge.sh/ and the full source code for the game may be found here  https://github.com/RichardMarks/gp-course-example-game-box-avoider
Post a Comment
Read more

Downtime & Holidays

I've been sick and unable to work on the game, so I don't have much to post this time. Merry belated Christmas and a happy New Year. I'm going to take the time to sort out the problems I've run into before getting too sick to work on things, and now that I can function, will be trying to move things farther along...
Post a Comment
Read more

The adventure continues

We're going to dive in with both feet and build a 2D side-scrolling beat em up game next. Different from the last approach, I'm going to incrementally build up the project and share it's development here. I'm working first on the game's assets and I've got a few things to show. The game will take place in a single simple urban alley environment at night. I could have spent a lot more time refining this environment, adding more objects, clutter, and making it feel alive, but then I remembered the purpose here is to teach how to make a game, not make the next big hit. So I'm stopping here. It's good enough for the needs of the project. Seen in the image above are a few crates and garbage cans which the player will eventually be able to destroy by punching or kicking them. Looking at it as I write this, I think the scene is slightly too dark, so I may go adjust the brightness of the assets at some point... The next step was making the character...
Post a Comment
Read more