[WIP][ImpactJS/PixiJS] Mine to the sky - a proc-gen platformer

[Codestar]

Mine to the sky

Genre: Platformer

Developed with: HTML5 using ImpactJS

 

Mine to the sky starts out with an astronaut who sets out to study the largest planet ever found in his solar system. Once getting close to the planet, the planet's high force of gravity sucks his ship down into the planet so fast that his ship burrows itself miles underground. With his ship damaged and his life support being the only systems working, he builds small robots to go out and look for resources and missing parts of his ship, so that he may repair his ship and make it off of the planet.

The game is a reverse miner game. Your goal is to gather resources, items, and face other challenges to advance your ship upwards. The further up you go, the more ecosystems and environments you come across.

No game is the same either. The game implements a random level generator much like a combination of rogue legacy and spelunky. Most blocks are destructible and allow for interesting ways of solving challenges and shaping your experience.

Every room in the game is designed by hand with procedurally generated sections placed within them. It plays much like any normal platformer, but with this destructible block aspect, each room becomes and opportunity for resource gathering for crafting new abilities and items.

You can follow my progess on this dev blog, as well as my twitter account. http://www.twitter.com/codestargames

Here's a few of the gifs of the game, as well as some concept art. Keep in mind that this game is currently using a lot of placeholder art. It will be replaced as soon as I can get back to art work.

Later gif showing wall jumping and terrain generation.

 

Image showing off a level layout and how it translates to the in-game level.

**older images**

gif showing off lava physics


gif showing off block damage animation



Early concept art for one of the robots you can choose from as your player.


There will also be many other different kinds of robots to choose from after getting upgrades.


 

[Gods]

looks very cool do you plan to support mobile? 

[Codestar]

Not quite sure about mobile yet, I've never really found that platformers really play all that well on mobile devices without the use of a bluetooth controller.

[Codestar]

UPDATE

I've started revamping the sprite style in Mine to the sky, going to increase the size of the tiles as well as the character.

Here's my first iteration of redoing the character sprites. Larger sprites will allow me to give more detail and make the character better reflect the concept art. This will also make the upgrades/new helmets more readable.

old style


new style


I'm also currently working on revamping background tiles.

I'm currently torn on whether I should stick with the current tiling that I have, where each tile is a distinguishable dirt block and is wrapped with borders or go with my new approach which is wrapping the blocks and keeping the inner tiles dark. I've gotten comments from other pixel artists that the previous approach seems t0o noisy.

old tiling example


new tiling example

[Codestar]

UPDATE

 

I've kind of kicked into full on drawing mode so I'll probably be posting a lot of updates on the conversion of the current assets and such. Last night I whipped up this new idle animation as a test. The sprites before didn't even have an idle stance, they just had a static sprite for idle.

I've also started working on a couple of background assets. Making pretty good progress overall. Really dreading the day that I'll need to replace that large Yoshi's island cave background. It's going to be quite the challenge.

As for code, I'm currently working on refactoring some of the core ImpactJS code to work with a new (and hopefully faster) inheritance library. I've got to squeeze out as much performance from the engine as I can because there is going to be a lot of entities on screen at any given time and I want this game to run FAST.

 

 

[Codestar]

So at this point I am extremely on the fence about continuing to develop Mine to the sky in ImpactJS.

 

Impact's entire code structure is not very v8 optimization friendly and porting everything in impact to a cleaner Entity component system based approach seems like more of a hassle than just starting fresh in Phaser and using it's nice ECS based structure for doing things. Luckily, I don't think it will be too painful concidering that a lot of the core game logic is done, but it's still a huge loss in productivity.

 

What's sparked this is that I've noticed over the course of my development that the game is getting slower and slower, and this is a result of the same things that plagued the Cross Code developers. Too many properties on objects to get optimized properly and huge inheritance chains.

 

I really want this game to run fast in a browser because it is ultimately going to be a relatively fast paced game. Here's hoping that phaser helps me reach that goal. Not to mention I'll finally get to use webGL and shaders in my game (which was going to be a huge headache to impliment in Impact).

[Codestar]

Update!



So I've been working my butt off to optimize the ImpactJS game engine (although now it barely looks like impact anymore...) and I've been able to squeeze out some major performance improvements. I've implemented an entity component system in various parts of my game and it's helped a lot for reducing the polymorphism in my objects. I've also replaced the old ImpactJS this.parent() calls with the more optimization friendly prototype way of calling methods.

I've still got some work to do figuring out a way of replacing Impact's Class.inject method with a more v8 friendly version, but currently what I have is a major improvement over what I used to have.

overall my game used to run at anywhere from 6ms to 10ms depending on what you were doing.
Now even with the most CPU intensive tasks I barely get above 5ms. (In the screenshot I turned on loading a buttload of coal on the map.) With the normal resource load my game runs at around 2-4ms with around 400 entities on screen at a time.

My next thing I'm going to try and tackle is possibly implementing Pixi.JS into my engine to replace Impact's Canvas drawing code. It will probably provide some further speed increases as well as give me a way to hook into WebGL for some nice shader effects.
 

[Codestar]

UPDATE

Holy cow do I have an update!


I managed to implement WebGl rendering using PixiJS into my custom ImpactJS engine implementation. It took some fighting replacing all of Impact's canvas drawing code, but boy has it paid off! My game runs flawlessly. I have around a 0-1ms update time on my game and it runs a cool 60 at all times. I even tested using some of Pixi's shader filters and they worked nicely as well! Now I'll be able to not only keep my game running at 60FPS constantly, I'll also have access to writing WebGL shaders to make my game look even better!

[marcgfx]

I know the feeling! i switched from actual html to webgl and it made an enormous difference (html was surprisingly not as bad as one might expect though). congratulations to switching, keep up the good work

[Codestar]

UPDATE!



The new tiles have been implemented in the engine and I'm working on getting more sprites changed over to the newer higher resolution style. I'm currently running into some performance issues coming out of pixi, and I need to figure out a better way to batch together the drawing of background chunks, but all in all I'm still pretty satisfied with the results of using Pixi. After this is done I'll be moving to design work and fleshing out a lot of the enemy types that will be in the game. Wish me luck!

[druphoria]

I'd love to hear more about the specifics of the performance issues you identified in ImpactJS and how you tracked them down/implemented the fixes (aside from the obvious boost from converting every single bit of canvas code to WebGL, which, by the way, sounds amazing and like a ridiculous amount of work). I think a lot of people here would be able to learn a lot from what you did .

[Binary Moon]

This looks really clever. Sounds like it would be fun too.

 

Regarding the tiles (you asked about it earlier ) I think the red stone contrasts well with the bluey backgrounds - but as others said - it's quite noisy. The style of the new tiles works well, but I think going back to the original red/ brown colours will make it a bit less dull looking and bring it to life more.

 

Either way though - it still looks awesome

[gdog105]

Very nice pixel art