Major Layout Revamp in the Works

After taking a break from my projects to participate in Ludlum Dare #29, I've finally recovered from sleepmdeprivation, gotten caught up with work, and am now back to working on foreachgamer.com  My focus right now is to redo the layout and framework, which will set things up nicely when it's time to tie in the new search options (note: search options deployed on the live website are currently disabled).

I have now opted for cells with a 16:9 ratio, which will make displaying screens and youtube videos a bit easier, since the majority of them are using this ratio anyway.  On top of that, things seemed a bit cluttered, so I increased the spacing between the cells.  The layout now displays information in an organized, easy to read layout without overwhelming you with too many games.

Taken from my Windows 8 tablet

... and again in portait mode

With that done, my next move is redo my entire foundation work for loading the cell data.  Now that I have worked out the kinks and come up with a system that will be the final version, it's time to make the code work for me rather than the other way around.  It's not going to be easy, and the website won't look a whole lot different when I am done, but the data that is being pulled into the system will be more organized, and more importantly, ready and waiting for the search system.

A Title and the Basic Gameplay Concept

I just hit that point in my concept work where things are really coming together to look (and act) like a game.  The cubes are not disappearing yet, so you lose sight of your main character while digging, but it at least proves the idea behind the work.

I’ve also gotten work done on a logo and title.  Not sure I’m sticking with the title, but it works for now.

* Note: If my posts seem short and to the point, it's because there is a very short time to complete Ludum Dare.  Once it is over (Sunday night), my blog posts will return to my prototype of Codename: Factions

Blogger API Integration in the Works

I've been working on a system which will make Blogger integration simple.  I'm currently bringing my blog at eatsleepindie.blogspot.com into my profile for Codename: Factions.  Here is the url if you'd like to see the progress first hand:

http://foreachgamer.com/indie.cfm?id=4

My goal is to eventually have a system where, if the developer wanted, they could use their own Blogger API key to load their blog posts automatically into their games profile.  If they opt of out that for whatever reason, then a url will suffice... the scripts will take care of the rest.

First draft of the included blog cells.

As an indie developer, this type of system would save me a lot of time.  The idea that I can continue to blog the same way that I already do, but to also have that content posted to my foreachgamer profile as well, just leaves me more time to focus on my game. It could potentially do the same for a lot of other indie devs as well.

Finally, A Reliable Server

This will be a very quick blog post, just to let everyone know that foreachgamer.com is now back up on a more reliable server. After major problems with our previous webhosts service, we've found a new home.

The profile for Codename: Factions hosted on foreachgamer.com

Also, I've added new screenshots and videos to the profile for Codename: Factions, and will be posting more work on that this weekend.

My New Website Is Finally Hosting My New Game Prototype

I wasn't sure at first which blog this should be posted in; this one here, or my blog at http://eatsleepindie.blogspot.com/  The latter is a side project I worked on during my free time the last two days.  It is an MMO resource management & strategy game using SmartFox Server and Unity3D.  The whole purpose of http://foreachgamer.com/ is to feature Indie projects and to help gamers find them based off the Un-Indie games they are currently playing.  I've had demos like Angry Bots featured on the site before, but never my own project.  Not until about 5 minutes ago.

The foreachgamer profile for my side project, Codename: Factions

That's two weeks of free time programming a web site hosting a profile for two days worth of prototyping in Unity3D.  I'm pretty proud of both projects, and I think they highlight each other very well.  This has only given me more drive to finish this system completely, as I am anxious to see other developers Indie games featured on the site as well.

At some point I will be adding a 'demo' cell to the profile, which will bring up a lightbox containing a Unity Web Player version of the game.  Not sure if I'll try it after I finish my shift tonight or not, but for now, it's time to pay the bills.

My Footer Search Concept in Progress

I've made some progress on my concept for moving the search menu to the footer.  The idea has expanded far beyond what I had originally planned.  Before I explain, here's a screenshot of the setup:

An example of how the search menu system will work

 

The 'platform' and 'genre' buttons open their prospective menus, each of which have various toggle buttons.  This will allow you to search, for example, FPS games for Xbox 360, Xbox One, and PC at the same time.  All platforms are shown in the screen above, but by default the 'old school' systems will be collapsed, keeping the size of the menu window smaller unless the extra space is needed.

 

What all of this has led me to is that this website will never need to leave the first page.  Between AJAX and jQuery, I will be able to load the entire websites content without ever needing to refresh or redirect the page.  Granted, I'll definitely be creating static pages to serve up to website crawlers, but for the end-user, the experience will feel more like an app than a website.

 

I will accomplish this by using the footer menu to limit the results shown.  If you search for FPS games, then only FPS games will show, but they will load the same exact way as any other search result; with cells containing the content that you can scroll through, with new cells being loaded at the end of the page when needed.  Looking for a particular game? The search can easily be limited to any game, so that you'll be getting all the information on that one title in your results, which can also be limited even further to just screenshots, videos, etc.

 

The resulting website will operate more like a search engine for anything gaming related, but will serve the content up in a much richer format, which also creating the illusion of profiles for users, games, etc.  I can't wait to use it myself, but first I've got to program it.

 

 

Plans for the Footer

After my last blog post, I started playing around with ideas in PaintShop.  The following is a very rough draft of my plans for the menus in the footer:

Menus and toggles for the footer menu

From left to right, the first button will be a rest button.  This will reset the buttons to their default state: the main content for your home page.  The next few buttons will be to narrow down results, and will be drop-down menus that open upwards and allow multiple selections where applicable.  The last set of buttons will be two toggle buttons, each with an "include" or "on" state, as well as an "exclude" or "off" state.  This will allow you to easily narrow results to either indie games, un-indie games, or both.

If memory of isotope's documentation serves me right, there are some pretty neat features that will come in handy when implementing this system.  And I think I may be able to completely tie the search system into it as well.  So, for now, searching is on the back-burner, and priority has switched to the footer menu system.

As is usually the case, things will probably change as I go, but that's how I'm comfortable working:  on-the-fly.

My Ideal Home Page

After some inspiration from my good friend Bob, my mind got fixated on the idea of what should be displayed in the home page of foreachgamer.com; so much so that, although I was staring at the television, I missed the majority of a Shark Tank episode.

The home page is crucial (referring to the default page a user sees after they login) when your main goal is to retain members.  When considering what I would want out of my own home page, and keeping the websites current layout in mind, here is my preferred list of features:

1. I want a lot of info, but I don't want it to be cluttered.
2. I want the ability to easily narrow down what I'm seeing based on options (ie. genre, platform, indie vs. un-indie, etc).
3. I don't necessarily want the latest info.  I want the latest info that has interested other members of the website that share common interests with me.  Don't show me the latest indie game on my home page; show me the latest indie game that other strategy enthusiasts are raving about.
4. I shouldn't have to search for content.  Granted, sometimes I enjoy browsing through pages of search results, but that's not what a home page is for.  Give me the greatest of the latest, and I'll find the rest on my own.
5. I should be able to customize it somehow.  There are a lot of ways to accomplish this, but the point is that if you let me customize my home page, it will feel more like home.
6. Along the lines of number 4, I shouldn't have to dig for content either.  It should be at the ready and in abundance, with the ability to narrow content as I see fit.

That's my personal list of priorities for my {feg} home page.  If I'm in the mood for the latest additions to the indie scene, that information should be one click away.  And when I've had my fill of that and decide to watch some Titanfall gameplay videos, I shouldn't have to click my mouse through 3 menus.  Hell, I shouldn't even need to navigate away from my current page.  The content should just load, as if by some sort of black magic, and then go away when I am done with it, returning me to whatever had my focus beforehand.

It seems like a tall-order, but I'm confident that with a lot of hard work and some jquery magic, I can build my ideal home page to my ideal gaming website.  One that has already done the searching for me, and is just waiting to deliver it to me with a touch-friendly-so-i-can-read-from-my-big-comfy-chair-via-my-tablet interface.

On a complete unrelated note, I have decided to dedicate one day a week to prototyping in Unity.  I miss dabbling.   I'll be blogging about whatever I decide to do at eatsleepindie.blogspot.com

Related Links:
Official Website (work in progress): http://foreachgamer.com/
Official Twitter: http://twitter.com/foreachgamer
My Twitter: http://twitter.com/eatsleepindie

Slow & Steady

Slowly but surely I am getting all the features that previously existed on foreachgamer.com tied into the mew layout. In my opinion, which is both humble and biased, the work is really paying off.

very close to what will be the final layout

I am still working on finishing the new search system, and hope to have that done before I start working my main job later tonight. The part that may be difficult is loading new cells dynamically as the end-user reaches the end of the page.  Isotope has some built-in functions to handle this, but I haven't researched how complex it is, and I'm fairly sure that loading HTML into the cells dynamically is not going to be easy.

Bring it on...

Progress on Updating the Search Page

I'm currently updating the search page for foreachgamer.com. My goal is to tie the new 'cell' system into the ajax search results, creating a system that dynamically loads cells (without a page refresh) based on the search terms.  I'm getting this done now so that in the future, when I want to add screens or videos to particular games, finding them will be much easier.  This will allow me to quickly search a title, visit the profile, and make changes on-the-fly.

More progress on the search system

Related Links:

Official Website: http://foreachgamer.com/

Official Twitter: http://twitter.com/foreachgamer

Youtube Videos Added to Game Profiles

The screenshot system turned out so well that I decided to integrate videos using the same setup. I had to customize the lightbox plugin I am using, and I can't really argue with the results.

Now videos for games open in a lightbox just like images

The screen above also shows the addition of the beta tag to the header, which keeps in line with the rest of the code & commenting theme of the site.  I will eventually be modding this lightbox script even further, enabling me to load html into the container rather than just images and videos.

For now though, it's time to get to work on the class system for members....

Updated Index Page

After my last post, I could tell the index page needed some adjustments. My eyes were ran to different areas of the page in the wrong sequence, and the page flow felt interrupted. I moved some things around, and I think the result is much more easy to read and inviting to visitors:

Related links:
Official twitter: http://twitter.com/foreachgamer
Official Facebook: http://facebook.com/foreachgamer

Brand New Server & the Return of Social Links

Foreachgamer.com is now moved to a new server.  The site now has just about as much room as it will need to grow for the next year, and there are plenty of options available to scale the size and capacity of the site up, so that is something I will no longer need to worry about.  I can focus on developing and expanding, knowing that it will be a long time before I need to move again, if ever.

I also added the social network links back to the site, but this time with a bit more style.  I was not a fan of the styling of the buttons provided by facebook, twitter, etc. so I used some royalty-free icons and placed them in the footer.  It's cleaner, and fits the style of the page better.  I may be making this grayscale in the future, but for now, the links work and that's what matters.

Screenshot depicting the new social icons, which are much less distracting than the previous ones

My plan today is get a list of little bugs taken care of, and then start adding back the login and registration system.  I'm predicting that we'll be taking registrations from the public by May 1st, but make no promises.  For now, though, this login system isn't going to integrate itself, so it's back to work.

Updates are Live!

I've posted the updates mentioned in my earlier blog to the live site at foreachgamer.com.  I am currently running a script that is creating the thumbs for the new square cells for each game, so quite a few games will have missing screenshots.

I had written a script that worked perfectly on my local server (running Coldfusion), but when I tried to run it on my live server (running Railo) I was getting a very odd error:

Metadata components != number of destination bands

After a lot of playing around, I found out that this was being caused by the ImageGrayscale() function.  This led me to changing my cfimage tag to convert the jpg image to a png image before writing it to the servers hard drive.  Seems to have fixed the problem, so I'm happy.

The new layout now generates grayscale backgrounds on the fly

You can now click any cell that is marked as a screenshot to view the full version of the image.  Navigating images works by clicking the left/right half of the image if you are using a mouse, and if you are on a touch device then swiping the image left/right works.

Screenshot cells now expand to a touch-friendly lightbox interface

Feels like it's time for a very quick Titanfall break, then it's back to work on FEG.

Scripted Grayscale Profile Backgrounds

I've just finished my script for creating the grayed out backgrounds for game profiles.  The script now takes one of the available images and applies some Coldfusion image functions to it, giving it a faded, monochrome look.

The latest changes to the profile layout

Along with that I've added jquery scripting to scroll the page horizontally when you scroll your mouse wheel vertically when necessary.  I've also added a spacer with shading to the top of the profile and am considering moving the description text to this cell in the future.

Chances are I'm missing a thing or two, but it's 4:30 AM here and I need some sleep.  None of the updates I've blogged about today are available at foreachgamer.com yet, but I will be getting the latest version of all scripts posted sometime tomorrow.

Related links:
Official twitter: http://www.twitter.com/foreachgamer

Improving on the Game Profile Layout

I took a few days break from the website, for my daughters birthday, but am back at the desk working on foreachgamer.com again today.  So far I've added a nice shadow effect for the cells, which makes them pop from the background a bit more.  I've also updated the cell's marked as screenshots to hide the cell-footer, since a description isn't necessary and their really isn't room enough for a caption... I may change this later, but for now, it works.

I then realized that I could use the same system that I programmed for the background images for Webplayer demos and have a custom script take the first image of every game and, with some magic, make it a faded greyscale image.  The result of this afternoons work thus far is depicted in the screen below:

The new profile layout, with shadow effects and a greyscale background image

I was pretty happy with the results, and my next step was to open up screenshots in a lightbox when clicked.  After browsing through open-source lightbox solutions, I am now about 50% of the way completed with the following setup:

The newly integrated screenshot lightbox setup

This lightbox solution only supports images out of the box, but I will be making modifications to support video and html as well.  I'm considering changing what happens when you click any cell in the page; rather than expand the cell to show information, I may have it load html into the same lightbox container that currently loads the screenshots.  This could provide the end-user with a very easy way to scroll through cells, since this lightbox is also swipe-enabled.  We'll see how things go, and whether or not the lightbox solution works better than the current one.

New Template System & Main Page Cells

My template system is complete... at least the first version of it.  The cells for each page are now loaded dynamically via database entries, which will allow me to create a nice custom admin system in the future.  I've also added cells to the index page: one for a welcome message, one for login, and another for registration.  The login/registration cells will expand to show html forms.  Once logged in, all three cells will disappear and the layout updated.

Cells added for welcome message, login & registration

Slowly Updating the Un-Indie Profile

I've made some progress on the Un-Indie profile page, starting to piece it back together into the new layout.  I'm continuing with the cell system, which will I've decided will be used site-wide.  It will make converting the website to fit smaller screen resolutions easy down the road, and  it also will provide a lot of user-customization via jQuery UI.

The beginnings of the new 'cellular' game profile.

The content of each sell is identical at the moment.  My goal this step was merely to layout a prototype profile page to assure myself that the cell layout will work.  With that done, I now have the gist of my websites scoping worked out.  I can now build a template system that will load content dynamically based off the game's id number and what type of cell it's in.  Once my template system is working, I'll be adding the Indie links back, and will be placing the Unity3D Webplayer files in a cell as well.  My thinking is that you will actually be able to play indie demos directly in a single cell, with the option to fullscreen if desired.

I'm really psyched to get this all working.  When I've got my template system in place, it will be easy to re-work the login/registration system into the new layout.

Note to self:  Re-add social networking links

Expanding Cells

I spent about a half an hour adding the ability to expand cells on the index page.  Clicking the image of any cell will now expand that cell, revealing more info about the game when available.  Clicking again will shrink the cell back down to it's original size.  Cells surrounding the clicked cell will re-position automatically.

Cells expanded to show more information

The demo of this is available at foreachgamer.com

Related links:
Official twitter: @foreachgamer

New Metro Layout & Horizontal & Vertical Scroll Options

I've been having a lot of fun experimenting with jQuery lately, which is the reason for my lack of blog posts this week.  My most recent idea was inspired by Windows 8.1 (which I love as an OS, regardless of the fact that 90% of people seem to disagree with me) and it's retro setup.  I wanted a horizontally scrolling layout, but I didn't want to sacrifice ease-of-use for this feature, nor did I want to lose any visitors who found the horizontal scroll annoying.  The solution was to do it both ways, and although I couldn't find a single instance of a website that had done it before, I thought it would be worth the effort.  The following is the result of that work; granted my PC is terrible at recording screen captures, and things are still in their first stages, but it works exactly how I had planned, and for now that's what matters to me.

Video preview of the new layout & scroll options

I'm not set on any of this at the moment, but I will be playing around with some ideas this afternoon.  I will be a proponent of the horizontal scrolling, and I"m hoping others will too, so that all this work hasn't been for naught.

Related links:

Official website: foreachgamer.com

Official twitter: @foreachgamer

Progress on the New Layout & Triple Digit Followers

Late last night the @foreachgamer Twitter account hit 100 followers.  I'm excited to have so many people interested in the site already, and I hope the number continues to grow.

As far as progress, I've been cranking away at the new jQuery layout system.  Basically my to-do list at the moment is simply taking the old website and code and incorporating it into the new layout.  I'm happy to say that the index page is pretty much completed, and with that, a lot of the framework for the remaining pages as well.  This new layout is going to save me a lot of time in the long run, since positioning elements is really done by jQuery.  I just create the boxes for info, and Isotope will move them according to the screen width.  I've always been a fan of websites with content separated into divided areas, and this will make supporting smaller screen sizes from the get-go a non-issue.

One feature of note added to the index page: The first row of data cells (ie. 'demos', 'articles', etc.) and the footer are now hidden when the page loads.  A few seconds later, both will animate upwards from below the screens viewport, and position themselves accordingly.  The footer remains fixed at the bottom of the screen, and data cells move up about 1/4 of the screens height.  So, regardless of the current screen resolution, every visitor will see the same sections of the data cells.

The index page is just about wrapped up for now

The only thing I have left to do on the index page for now is to add the black faded background behind the cells so that they stick out from the movie a bit more. 

The Final Rough Draft

I've updated the website at foreachgamer.com with all the changes I've made using jQuery the last 24 hours.  It took some time, but I've gone through and cleaned up and commented my code, and the system is now even easier to work with than it was before.  I'm more and more happy with the results each day, and I'm looking forward to using this website to track my indie favorites in the future.  I'm also psyched to swap out the background Tintfall video with a video from a featured Indie game hosted on the site.  I have plans within the next few days to make the background video dynamic so it can randomly cycle between a few featured games.

I've gotta admit, it's pretty sweet to see the Titanfall Trailer as my sites background

I will also need to swap the background youtube video out for a fullscreen image of the game for any devices that cannot output the video for whatever reason.  In the future I may also be able to load a Unity3D file as the background.  For now though, I desperately need to unplug. 

The jQuery Tree Keeps On Giving

Before starting my shift for the night, I played around with incorporating some jQuery plugins into foreachgamer.com.  After several hit-and-misses, I settled on a combination of my old page style, Isotope (http://isotope.metafizzy.co/), and Tubular (https://code.google.com/p/jquery-tubular/).

The following is a screenshot of the new layout and a quick screen recording to show how the layout adjusts itself according to the window size.  You'll have to forgive the framerate of the recording, but my graphics card usually cripples under the workload I pile on to it.

The background of the webpage is now a Titanfall trailer

Video showing the updated background and how the layout adjusts for browser size

I've still got quite a list of ideas for features involving jquery, and they aren't going to program themselves.  I'll be sure to keep everyone posted with whatever comes out of all this...