[WIP] AfterEffect

[phreaknation]

The Game: AfterEffect

Genre: Survival Horror RTS
Graphics: 2d Isometric
Style: Dark comic book style
Storyline: This is a make your own adventure where as the game play varies depending on how you set it up. You could have zombies, or something else entirely in the game as well as manipulated difficulty. Early Concept of the story picker.
Languages: HTML, CSS, Javascript, Possibly CoffeeScript
Engine: Pixi.JS, Phaser.IO, Phaser Isometric Plugin. WebGL/CANVAS

Start Date: December, 20th, 2014

 

 

The Team

We are a small group of people who are working on a similar project. I am the main lead for the project as the idea is mainly mine but everyone even others not working on the project are welcomed to suggest ideas. I wont go into detail about the other members as they can talk about themselves once on the team but I can say that they are early in their stages of their area while I am more of a senior.

I am of the 90/10 philosophy where as you take all of the ideas and put them down and then scrap about 90% of them to work on 10% that actually makes sense and will allow for a finished product. After you wrap that up then you can go back and add parts of the stuff left out. This allows to be able to actually finish a project faster and actually get it done. I am also a professional front end web developer by trade which is why I tend to make things for the web.

 
Team Members

Joel D. Programmer, Artist(I suck at), Sound FX(I suck at)

Austin P. Sound Engineer

Steven W. Programmer

NEEDED 2d/3d Artist

 

 

Screens

Please excuse the the rather crummy graphics atm. I am by no means a graphics artist. Also note that there are more screens in the below comments

Staggered Isometric Map
Setup Tiled Map Editor Staggered Isometric maps. I am working with Lewster to add this into the Phaser Isometric plugin, as well as Tiled Map Editor Diamond Isometric maps.
 
Pseudo Lighting
Setup the beginnings of a lighting system.
 
Day Night Cycle
I started to work on more of the lighting system and added in a DNC which will effect the overall game.
 
Selection Radial Menu
Worked on a selection menu for when you right click on objects. Using Radial.js
 
More lights and Healthbar
Added in some more lights all I need are images for sprites to go with the lighting. Lighting also are objects and have various settings with them.
 
New Light type
Added a new lighting type, Spot Lighting. This light works in various ways. Currently this one is setup as the player light and follows the angle of the mouse relative to the player. The player character also now moves with the mouse as before it was via the arrow keys. Very Smooth except when clicking several times as it stutters for a split second in between clicks.
 
Clothing Toggled
Heres a shot of the Inventory opened showing the available clothing slots. The center brick is a display of the character.

Armor Toggled
Heres a shot of the Inventory opened showing the available armor slots. The center brick is a display of the character.
 
Inventory with Items
Items are now loading into the inventory screen programmatically.

 

Inventory screen with bag inventory and a battery stack

The inventory screen now can open up inner inventories and now has stacking.

 

[phreaknation]

added in some lighting features. Now lights can flicker, have a flicker range, life limit in seconds, a color, falloff limit, and brightness radius. Also the lights can be loaded from JSON, or added programmatically. Already have 8 light types including chem lighting(glow sticks) type lighting. Starting to build some of  the back structure to help support some of the other systems that are reliant on some structures.

 

 

[Ivatrix]

Hmm definitely looks interesting, I'd be keen to play it when it's got a playable demo

[phreaknation]

Hmm definitely looks interesting, I'd be keen to play it when it's got a playable demo

 

Def. Once I get more into it. I am having to hold up due to Lewster being gone due to the holidays but once he gets back there will be way more stuff as I am working with him on a Tiled map importer for his Isometric Plugin. Although while I wait on him I have been busy with a few things.

 

Below is a picture of a new light in my lighting system. It is a flashlight made from a spotlight. While the light is on, it follows the mouse. The player now moves around via mouse clicks vs arrow keys. I am also working on the inventory and some PC interactions. Thinking about adding vehicles down the line but unsure atm. May just put in some kind of fast travel map or something.

 

Also working on partially procedural generated maps with prefab buildings and preset object type locations. Lots of ideas forming for the maps but need to finish the importer so it works with the isometric physics that Lewster has put together.

 

 

 

[phreaknation]

Added an inventory screen that opens and closes. I also added a slide out for bag space. The bag slide out will house all storage spaces for all inventory while the main section shown will house for placement of inventory items. Various inventory containers will include various backpacks, tool belts, fanny pack(yep) and more. Without any extra inventory containers you will have two slots of inventory. One for each hand. May add slots for pants and such but undecided at the moment. Also there will be perks for wearing items like a watch which will show the time of day, or sunglasses will darken the overall screen. Also some items will restrict other items. A Football helmet may restrict a paintball mask but not restrict sun glasses. Also there will be perks and also impairments such as your character needing to wear glasses to see. If you take off the glasses the screen will become blurry.

Clothing Slots:

Back

Torso

Legs

Armor Slots:

Head

Face

Torso

Arms

Hands

Legs

Feet

Accessory Slots:

Neck

Waist

Wrist Left

Wrist Right

Finger Left

Finger Right

Clothing Toggled

 

 

Armor Toggled

[phreaknation]

Freaking Awesome. I get to post another update. Things are happening fast which is amazing. First off there is now an official items object. From that object you can create new items. Currently there is only inventory manipulation but it will eventually handle all item types including character held items. Secondly I went over to game-icons.net and got a few icons for temp use and managed to get the items loaded in to inventory slots on the active player. Also the clock now works if you have a watch. Will work on the backpack inventory and the glasses tomorrow. Also the flashlight is now held in the players hand in respects to inventory space. I will set it up so that if it is not in a hand then it can not be used. Cant use a flashlight from your backpack. Things are starting to shape up. Will also work on drag/drop of inventory items and such soon as well.

Inventory with Items

[phreaknation]

Another big update.

 

Setup stages for Booting, preloading, mainmenu, and moved the game into its own stage. Also setup the preload to work for any scene. to unify asset loading. The Main Menu is fleshed out although needs a little work. The pause menu still needs to be worked on, but that is soon.

 

The inventory is on its way to being completed. I just need to work on drag and drop and the bottom bar and it should be 99% done. Also Items have stacks and each stack size can be different. Inventory space via bags and such are also in effect as you only start with space to wear stuff as well as two slots for your hands. I may include pants to have inventory. Also inventory will soon have limitations to what can be held. Small backpacks will have limits to what items can be placed in them. Hands will be able to carry everything but there is only two slots for them and most items will take both hands to carry or use. The tool belt will only be able to hold certain items like tools and smaller items. There will be holsters and slings for weapons that will essentially be able to rotate through so you can swap between weapons if you want.

 

Also sound effects and BGM are up and going. I want to setup them via Tiled importer so they can be brought in via Tiled properties and then handled automagically. Also worked on variation of speeds. Crouch, Crouch Sprint, Walk, and Sprint. Each has their own speed which effects the player movement. Also now movement has sound effects, although temporary.

 

 

Inventory screen with bag inventory and a battery stack

[phreaknation]

Another update coming at ya. So I got the toolbar styled and items loading in there. Need to sit down and setup a bunch more items other then the few I have.
 
Another big note is the drag and drop of inventory items are good to go. I need to add a ghost image near the cursor so that it is more identifiable. Currently the moved item goes semi transparent but I would also like the item to drag with the cursor with transparency. Will work on that later.
 
No other real update as yesterday I took a day off as I started a new job and the days are long, lol.
 
No Belt
Belt Equipped

 

For more information you can always head over to the AfterEffect facebook page or keep up to date on my twitter page.

[MistressCherise]

so far it looks good!

[phreaknation]

Another update. This time a bit delayed after I took a small break from starting a new job. Showing off the history screen. Basically this is a pick your own adventure style game. Which will effect the game difficulty in some form or fashion. Some modifications to the game can include the amount of loot spawned, events(both positive and negative), if the game will include zombies or not, or how aggressive towards you NPCs are. looking into more game altering modifications as well as seeding based on these options. This game isnt primarily zombie based even though they are a possibility. This is a survival game at its peak while horror/thriller being a sub genre. Currently there are 6 classes and I am extending them to 24 with the ability to create your own classes and possibly share them. Each class has a primary skill they prefer starting out. I may do a bell curve stat system or a modified point system in the likes of Diablo. Not currently sure yet.

 

History Screen

 

Current Classes:

• Accountant
• Animal Handler
• Cashier
• Coach
• College Student
• Construction Worker
• Electrician
• Farmer
• Fire Fighter
• IT Professional
• Janitor
• Lawyer
• Manager
• Mechanic
• Nurse
• Park Ranger
• PE Teacher
• Police Officer
• Professor
• Sales Person
• Soldier
• Teacher
• Truck Driver
• Veterinarian

 

Current Scenarios:

• an asteroid devastated the world
• the dead came back to life
• mother earth faught back
• a new iceage hit
• the machines just stopped
• planet Nibiru passed by Earth
• a pandemic effected most of the world
• the power went out
• several super volcanos activated
• the war to end all wars happened

[phreaknation]

Did some fixing of the code today. I used to draw the entire player space worth of the shadow map and then draw the lighting to that. Now it just draws to the camera and updates lighting based on that. Lights are still drawn reguardless, but only show up visually in the camera space. Will work on that to nip any future bottle necks. Will base it off of radius size and if it can be drawn on the screen.

 

Also have a few things to sort out with the inventory screen such as draw and drop of locations not fully working. They do not limit the type of item properly as I am working on that. Also the container is a bit funny when opening and closing with a sub inventory already opened. Hopefully I can get that hashed out over the next couple of days and show off a game play video. Fingers crossed.

[phreaknation]

Activity is far from idle. I am going through a MAJOR refactor which wont be the final state. Just trying to assign some of the generic functionality to an object. Lots of shuffling. Also working on rendering techniques as well but need to get the map loader back up and going to really make it useful. Also if you can see the phone for the time and player name I have changed it to a custom web safe font that is free from DaFont.com. Also working on some interesting scaling techniques. I can not use the full screen feature from phaser as the UI is mostly HTML/CSS so I setup javascript based full screen with an Phaser.io canvas resize. Works nicely. Only issue is there is a slight delay on the resize so I had to setup a timeout for now. Looking for an event driven way. Maybe there is an event once the document is full screen?

 

Anyways below is the current state of the game. I am going to finish up the mess the code is in over the next week or two and then work back on the map loading section as well as some saves on rendering with maps. Want to see if I can get sprites that are x amount of pixels outside of the camera to hide to save rendering while still still being in the game. Just not rendered. Btw the FPS counter is active and the 60 frames is on my system which is a beast. I still get more then 30 frames on my work system which is absolute shit. However I am not loading in a shit ton of sprites and doing a lot of calculations either.

 

 

Current State

[phreaknation]

Whelp, havent posted in a minute, but dont think progress isnt happening.

 

Here are some progress screens from what has been going on. One thing to note is with the old tile system and new tile system the difference was the old tiles were generating a diamond style tile map and would have to generate the entire map. The new system which still has some kinks only generates what is visible plus a small range outside of visual space. This dramatically increases performance and allows for infinitely large maps. There is a small kink which I believe to know what the problem is which is why the tiles seem to look so random but are not quite random. Be keeping an eye out for more progress.

 

 

Tile system

New Tiles

New tiles in play

Thanks to Steven W. for creating the perlin noise generator.

Big thanks to Austin P. as he has started work on the audio and has submitted some sound effects and a demo of the style of music I am looking for. Which he nailed on the head on the first try.

[phreaknation]

Working hard on the game these past few days. Wanted to share some screens of the game.

First up is the Renderer. I had to slow this pupply down to see how it works and it worked better then what I thought.

Nest up is just showing some debugging information with the game. Nothing fancy

Wanted to show off some of the tile generation. Pretty good looking imo. Can not wait for the tile blending to be done to make this look tons better.

Finally showing off the water animations. Very simple water animation but I think it adds to the game.

Some other things that I have done recently:

• Perlin noise tile generation
• Prefab Importer
• Render visible tiles based on position
• Border/Hotzone Scrolling
• Keyboard scrolling
• Jump to player position

Up and coming things (priorities):

1. Render tiles specifically around the player(visited tiles)
2. Capture mouse
3. Prefab Placement based on the tile
4. Render UI with Phaser.io
5. Fix lighting with the new changes
6. Fix movement with the new changes
7. Render the interaction menu with Phaser.io

[phreaknation]

It has been a minute since I last updated on AfterEffect. Work hit me pretty hard and now I am at the end of that. With that I have started working more on the in-game UI. We now have 2 graphic artists on payroll, when I can afford it, lol. So far Alina, who is more of the UI/Objects artist has done a fantastic job with the graphics for the UI. While Rob who is more Items/objects has done a fantastic job in that area. Below is the showcasing of that work.

Just to note, this is how this all started

It ended up like this

Add in some items and drag and drop

Setup the overall CTA's on the inventory

Added some tooltips

Add in multi-language support as well

Now I am working on the context menu

I am thinking of stripping the code out of what I already have after I am done and releasing it for others to enjoy, scrutinize, make better, and use in their own works.