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...

Rollin' with JQuery

After doing as much research as I could on jQuery and the things you can accomplish with it, I've decided that my site framework needs to be redone.  It will not look much different to the end user, but it will function in a much more user-friendly manner, and the controls will mimic those of an app rather than a website.  I've been brainstorming up tons of ideas for the site, and I've got about a half-a-dozen I'm dying to get started on, but for now, I'm starting with the framework.

The layout for the index page will look pretty much the same, but the content will be layed out a bit different.  I'm compressing the layout by one column, and adding panels that expand/contract from the right and left sides.  I'm doing a terrible job explaining this with words, so we'll go with a screen of my concept:

The new login/registration panel

The above screenshot shows the panel I was trying to describe.  There will be a welcome message to new visitors at the top, followed by an expanded login sub-panel.  The registration and "Add A Game" panels can be expanded by clicking the appropriate header, and the login panel will collapse when needed.  

When you click to preview one of the games/demos/articles/etc., the entire right panel will hide, and a panel on the left with more details will open up.  Closing this left panel will re-open the right panel automatically, eliminating the need to adjust the content in the center.  Since only one panel will ever be open, and one will always be open, the "content" in the center of the screen will only shift position to the left and right, but will never need it's layout updated.

Concept work for the upcoming 'content preview panel'

I intend to use this system for my search page as well. I've come to the realization that the search system in this website needs to be absolutely top-notch, since chances are it will be the resource most used by members.  Granted, browsing through the featured section is nice, but when I'm ready to search for a game, I want to put in what I'm looking for and get easy to navigate results.

The updated search system, however, is for a future blog post.  As are all the other ideas I've added to my To-Do list.  Needless to say, jQuery will be changing this site drastically, but it will be a much easier to use website in the end.

Completed (Beta) Account & Profile Settings

So I've completed the systems for the account & profile settings for members.  The forms work exactly the way I want them to for now, and the workflow for managing everything is pretty stream-lined.  I finished up my avatar image uploading code, and the system now offers the option to click the button to browse for a file rather than opting for the drag & drop interface... I've tested this on a Windows 8.1 tablet and an Android tablet and both work exactly as expected.

Final (Beta) version of the profile & account settings systems

The profile info form is almost completely dynamic, meaning I can add any number of inputs and textareas, and as long as I name them using my system, then they will function with very little effort on my part.  This is going to come in handy with future forms:  when I manage an Indie game profile that I'm working on, I'll be able to drag and drop 10 images from my desktop onto the site itself and begin organizing them almost immediately.

I'm excited to see systems start coming together at a faster pace now that the registration and login systems are nearly complete.  I haven't decided when I will make registrations available to the public yet, but the first priority is to continue adding content while adding the ability for future members to add content as well.

S**t Just Got Real

I've been working the same job for quite a while now.  I haven't had any reason to learn new technologies since the job has remained pretty much the same.  I've dabbled with Unity3D and SmartFox for fun, but beyond that, work has pretty much been the same-old Coldfusion work.

Since I'm starting from the ground up with foreachgamer.com, I decided to start looking into new techs that could help improve my website.  That's when I decided to give jQuery a shot.  I'm blown away by the ease-of-use and the power of this system.

I will never program websites the same again...

Avatars Added To Gamer Profiles

After finishing up my work tonight, I decided to make more progress on foreachgamer.com.  Using jquery, I've created an avatar system that allows you to drag & drop any JPG image onto the 'profile settings' of the page... from there the system will automatically crop, resize, and generate thumbnails for use with your account.

Preview of the new avatar system, complete with drag & drop interface

I will be adding code tomorrow to allow a file browsing window to open when the image is clicked for those who prefer the older method of file uploading.

For now, it's time for some desperately needed sleep.

Updated Profile Settings & Various Small Fixes

I started my work on foreachgamer.com today with fixing a small inconsistency that has been bothering me.  As you can see from the image below, edges on the right side of the page were not lining up correctly.  It wasn't always obvious, but when it was it was hard to ignore.  I've since fixed this with a little touch-up CSS work.

The CSS layout bug that I couldn't ignore any longer

In keeping with the theme of little things that were bugging me, I decided to change how header titles are displayed as well.  Gone are the bright and somewhat-distracting '{}' wrappers, replaced with grey brackets that are barely noticeable but still highlight the header.

The new header-wrappers are much less distracting

And I liked the look of that so much, I decided to use a variation of the same styling on my account settings page.

Updated account settings page that ties the whole theme together

Time to stop fartin' around and get some more in-depth programming done or this registration system is never going to get used by the public.

Related links: 

Official Website: http://www.foreachgamer.com/

Offical Twitter: http://www.twitter.com/foreachgamer

Account & Profile Settings

I have finished the registration system for foreachgamer.com, bu ti have not posted it yet since there is literally nothing for a new member to do besides browse Un-Indie games, which they can do without registering.  So, before going live with registrations, I'm getting some more content done for the site.  So far this has included an account settings and profile settings system that I am working on.

The new Account & Profile settings system

Once this is completed, I will be putting together a simple profile for the individual members, as well as working on a rating system which will allow registered members to start building a taste-profile by rating Un-Indie games.  This will aid the system in providing members with Indie games that are suited to their play-style and themes.  

The registration system was, as is always the case with registration systems, long and tiring.  Forgotten password scripts, validation, error checking, confirmation emails, etc., etc.  That being said, I'm very happy it's done, because once it is live, all the content I create from there on out will be getting used by gamers.  And that's what this whole thing is all about.

Login/Registration Nearly Completed

I have just about completed the login/registration system for foreachgamer.com  Right now I am in the process of putting the finishing touches on the email confirmation system.  After that I've got another round of tests to run, and if all goes well, visitors will be able to register for the site.

Preview of the upcoming login & registration system

Once this is completed, I will be able to very quickly build a system that allows you to rate and/or favorite any of the current Indie & Un-Indie games, so that I can start building taste-profiles for the users.  This will allow the site to recommend games based off of your personal preferences, games you already enjoy, and what platforms you have (ie. XBox, PS4, etc.)

MMO & Multiplayer FPS Demos

I've spent some time getting a couple more demos available for visitors on the site.  There are two more added, both coming from the SmartFox websites examples section.

The first is a Multiplayer FPS game that uses SmartFox Server technology for creating/maintaining games.  The use of SmartFox allows games containing more players than Unity's standard Networking will allow.

The second is a demonstration of SmartFox's new MMO technology, which comes standard with the latest version of their server software.  This demo include NPC bots as well as player-controlled characters.

I think these two demos will serve as great examples of what I'm trying to accomplish with the site.  I can't wait to get more work done so Indie developers and studios can start sharing their own Unity Web Player files as well.

Related links:
FPS Demo: foreachgamer.com/indie_game.cfm?id=3
MMO Demo: foreachgamer.com/indie_game.cfm?id=2

Official Website: foreachgamer.com
Official Twitter: @foreachgamer

Genres Added To Search

I've finished running my loop to correct the absence of a genres column in my database, and all data for the current list of games is populated.  I've gone ahead and added a drop-down option for limiting search results by genre.

Genres drop-down added to the search system

Next on my to-do list is getting the registration/login system live.

Related links:

Official Website: foreachgamer.com

Official Twitter: @foreachgamer

My Twitter: @eatsleepindie

Instant Un-Indie Game Search Results

I had about 30 minutes left of work on the system for searching the 'Un-Indie' section, so I figured I'd get that done last night before turning in.  The search results are now completed, and any search results are displayed without the need for a page refresh or post.  There is also a simple search form in the footer that posts to the search page, making the system easily accessible from any page.  And the most recent update, the page buttons at the bottom now work as expected.  I've also realized I forgot to add genres to the database table for the games, but luckily I planned for such a mistake and have a very easy to use hierarchy of xml data that I can loop through to remedy this.  Once completed, this will allow me to build a very simple recommendation system that can display results in various locations, starting with the unindie game profile page.

The completed search results page (version 1)

My plan for a future version of the search results page is to show a handful of results for each category (ie. Un-Indie, Videos, Tutorials) so you can easily see relevant content for each.  A quick click will narrow the results down to any of these categories.  This way, a quick search for "FPS" will yield not only Indie games on the topic, but the latest news articles, blog posts, screenshots, videos, etc. on the topic.  If you're looking for just Indie FPS demos to play, you're only one click away from getting pages of results.

With the first version of the search system completed, it's time to put the finishing touches on the login and registration systems.  Once the site is capable of having members, I'll work on giving those members the ability to rate games as well as add them to favorites lists.

Completely off topic, I have created the twitter account @eatsleepindie for personal use if anyone is interested in following it as well as the offical twitter for this page @foreachgamer

Related links:
FEG Official Website: http://foreachgamer.com

Updating Un-Indie Game Search Results

I've now go my search results system working using ajax rather than old-school form posting.  When you hit the search button in the search options section, the system will now load the first page of search results without the need to post to a new page. 

Searching Un-Indie Games has been updated to use AJAX

 

 

I still need to put some more work into the query that grabs the data, but for now a simple LIKE '%{var}%' search is good enough.

 

As you can see from the above screen, I've also added a search bar to the footer, so games can be searched easily from any page.  This system uses an old school form to simply post to the search page with a query string.

 

Time to get the page buttons at the bottom to work...

 

Related Links:

Official FEG Website: foreachgamer.com/

Official FEG Twitter : twitter.com/foreachgamer



Searching Un-Indie Games

I've put some time into a search page which, for the time being, will be used solely for searching the Un-Indie section of the website.  The search query is very basic at the moment, but I will be adding relevance ratings to the results later on.  For now, I simply wanted a way to easily search the data I've gathered thus far.

The beginnings of the search page

 

Next I will be making the search form asynchronous so that your browser never needs to leave the current page.  I'd like to add some form for quick-view button for the search results so that opening a new tab or navigating to a new page isn't necessary to get some extra info.  I haven't decided how or where the results will be displayed, but I've got time to let the thought simmer.

 

Demos Are Coming

After my last post, I decided I really wasn't in the mood to program form validation for the search system.  Instead, I decided to start working on the Indie Games showcase, since this will make up the majority of the website content.

I want a website where I can not only read about works-in-progress from other Indie Developers, but also a place I can easily demo them.  I want to give the devs complete control over their project, while making updating their project's page simple and quick... I prefer to spend my time programming my game rather than fighting with websites to keep my followers up-to-date.

Enter the Unity Web Player.  Not only will Indie studios & individuals be able to showcase their games screenshots and videos on the site, but they'll also be able to upload a Unity Web Player version of the game, so members of the site can demo right in the web browser.

Showcasing how the site will allow members to play demos directly in the web browser

Angry Bots is the first Demo added to the website.  It seems fitting considering it's the first Unity Project I got any experience with, it's ready to go out-of-the-box, and it showcases what Unity3D can pull off in a web browser.  When you visit http://foreachgamer.com/ now, you'll see that in the Demos section, ANgry Bots is now the only listing.  When you click the link to view the Angry Bots profile, you're shown a handful of screenshots, some info on the game, and the demo itself.  I put a holder image in place for the WebPlayer files since I do not want any games starting in my browser until I give the go-ahead.  The holder image, seen below, is created procedurally via CFML using the first screenshot.  I can easily create some scripts that will allow indie members to select with image they would like to use for this place-holder, and the rest will be taken care of automatically.

 The place-holder image for the Web Player, created procedurally

This definitely isn't a final design by any means, but it works for what I was intending to do, which is get across the point that we will be hosting .unity3D files for demos.

I will probably start looking into the new Unity3D asset package they put out recently to see if I can get another demo or two out of their projects.  If not, I have enough experience in Unity to create a few demos myself when/if I find the time.

If you are a Unity3D developer and have a .unity3d file you would like to host on the site, we'd love to work with you.  Granted, there isn't a whole lot of site here yet, but it would be free advertising and would really help me showcase what I'm trying to accomplish with the website.  If you are interested, contact me at the following e-mail address:
support@foreachgamer.com

Related Links:
FEG Offical Website: foreachgamer.com
FEG Offical Twitter: twitter.com/foreachgamer

An Un-Indie Profile

Experience has taught me that when you finally decide on something 100%, it's time to clean up & optimize your code.  I've eliminated straggling functions, and rebuilt the cfml scripts responsible for the index page from the ground up.  Now, everything gets passed into a single "datablock" template via a cfloop, and the script takes care of the rest... even how many page buttons are required for the situation.  It sidetracked me for a while, but the resulting code is much cleaner and easier to work in.

It doesn't look much different, but the code is much cleaner

Having settled on the main design & layout for the site, and having redone the code for the main page, I figured it was time to give this website's sitemap a second entry.  The result is the beginnings of a game profile page for Un-Indie games:.

Beginnings of the Un-Indie Game Profile

It's not much yet, but filling that template with data will be relatively easy now that everything is setup... which means I'll probably leave it for another day.  Right now, I'm leaning towards working a system for searching for the Un-Indie Games I've collected thus far.  If nothing else, it will allow me to browse through the list of games in the database, and I honestly have no idea what 99% of them are at this point.  And it will give any visitors a little something to do, although the search results will probably be pretty disappointing until I'm done data-scraping. 

FEG Offical Site (Work-In-Progress): http://www.foreachgamer.com/

FEG Offical Twitter: http://www.twitter.com/foreachgamer

Oodles of Data

Right now I've got my local Windows Server, which I use for development, running a script that scraping the web for data on video games and grabbing images.  This data is being added to the database automatically, and images are being ushered into appropriate folders.

I am then periodically taking the new data and images and uploading to the live server.  From there, the live server runs a loop that takes every image downloaded and creates two more copies... one resized to a width of 640 and a thumbnail that is half that width, both cropped to a 16:9 ratio... all done automatically with a little CFML.

So I'm going to sit back and eat a bagel while my website fills itself with data on tons of games.  Who knows, maybe I'll fire up the XBox for a round or two of Halo 4... if I'm in the mood for an all-out-lagfest that is.

More Progress on Filling the Layout with Data

Just a quick screenshot to show the websites progress... I now have every cell filled with a game, and I'm really liking this layout.  I'll be getting the updated code published to the server soon.

The new layout completely filled with data.  

I have a 10" tablet that runs at 1366x768, and the layout fills the screen almost perfectly in both Landscape and Portrait views.

Finally Starting to see A Website In There

I've finished my script for grabbing data via the API, and the website is now being populated with a wide assortment of game data rather than repeating the same five games over and over as before.  Here's a screenshot of the updated layout with new data from the API:

Populating the new layout with data from the API

As you can see, the website is really starting to pull together visually.  The dots below each section fade from one story to the next, and I had planned on getting a video recording of just that, but I do not have the software installed at the moment so this screenshot will have to suffice.  I'll be updating the site with the new code shortly anyway.

Leveraging an API

I'm currently working with an API which will provide the website with data for the 'Un-Indie' section.  This area of the site will be for anything non-Indie related, mostly for your blockbuster gaming hits and news.

Pulling data with the API is a bit slow-going at the moment, since I'm finding the results aren't very consistent, which is causing error messages in my script.

Hopefully I can get this wrapped up today and start pumping the data into profile pages for the individual games.

More Updates to the New Website Layout

I decided to do a bit more work on the site after finishing work for my client tonight.  About a half-an-hour later I have updated the new layout of the website to the following:

More updates to the website layout.

My plan is to make the dots underneath each of the boxes scroll that box to the next page.  I'm hoping to get that done in the next few days, and maybe get some more temporary content in my database to provide some randomness to these feeds, at least temporarily.

I've got to admit, I'm happy I decided to scrap my previous version of the website. This layout is capable of fitting a lot more data, and does so in a layout that is more streamlined and easier to read.  Your eyes immediately go to the content rather than the websites graphics, which is exactly what I was hoping for.

Another busy day tomorrow...

A Fresh Face For A Two-Day-Old Website

After a little inspiration from Bob, and help browsing the internet for inspiration from my girlfriend, I think I've landed on a much more appropriate page design.  It's concise, nothing about it is distracting, and it's going to make the website tailor itself to your needs with a single click, no matter what you're looking for.

FEG design version 2.0

First thing, the colored text on the grey bars are buttons.  Click 'Play', and the website will update accordingly, offering you the latest Indie game releases, info on demos, etc.  Click 'Learn', and the website will update and show you articles, dev blogs, tutorials, etc. on anything game related.

Further down, clicking 'Indie' will adapt the site to show you the latest updates and posts from the sites Indie devs.  Naturally, Un-Indie is anything from dependent studios, and everything else is pretty self-explanatory.

I've also left a bit of a coding joke in the design... which makes the website look as though it is the contents of a function, ending with the footer bar which scrolls with the page. 

Edit.  Forgot to mention, if you want a live preview of the new design, it's available at the following link:  http://www.foreachgamer.com/index2.cfm 

I'm loving this new design.  Time to switch everything over...