Robot - TD

[Brad]

Another update - stayed home due to sick family today and had some time to work on stuff during nap time. TitleState now handles the click event and goes to the MainMenuState. The MainMenuState has menu items which have rollover effects and call javascript functions in the MainMenuState class when clicked. Menu items can be styled and positioned using CSS.

As always you can get the latest updates from the bitbucket repo.

[Brad]

Resolution.

I suggest using 960×640. That size will fit on mobile tablets (including iPad) and can be scaled down to 480×320 to fit on an iPhone. You can use CSS scaling to make it fit on all the other devices too.

I realize we aren't necessarily developing with the idea that a bunch of other people are going to play this but I figure we may as well try it and see if we can get it to work on a bunch of devices. Easier to show off to non-android using family members that way anyway haha.

Also I think 960x640 fits into the "big enough" category. What do you guys think?

[Brad]

Another question that needs answered is tile size. Something like 20pxx20px gives us 40 tiles with 160px left for ui (assuming 960px width). Any thoughts.

Also I am posting stuff to the repo most days. Check the commit log for details.

[Nick]

160 should be enough for the UI.

[Nick]

I have been reading though what code is up so far, and I am liking the state system. Reminds me of the Android app life-cycle.

[Brad]

State machines are super helpful for games. Let's you keep all the menu stuff out of the way. Plus for games with distinct modes (like JRPGs with battle modes and over world's) a state stack makes it easy to go to a new state and then come right back to the state where you left off.

[Nick]

Problem with the menu. When I centered the canvas in the browser window the menu does not move with it. I will figure out how to make a menu using the canvas, as that seems simple and a good way to get more familiar with it all.  Either that or I can do the easy way of positioning the menu relative to the canvas with JavaScript.

Other then basic jquery, are there any libraries we should think about? jCanvas? Zebra? There are a bunch of them.

[Brad]

Dont use canvas to create the menu. You'd have to recreate the hover and click functionality of links.

The canvas container must be relative positioned or the absolute positioned menu links will be absolute based on the page rather than the canvas container.

I guess the other point is to make sure to center the canvas container and not the canvas itself.

[Nick]

Yeah. Never mind. I had a mistake in my CSS, the menu positions correctly now.

[Brad]

I'm glad you are working on it. This will be our first collaboration in quite awhile. Courtney is even going to set it up using require js so we can look at how that works.

You can always Google talk me if you want.

[Nick]

I'll try not to bother you too much

This is my first real game, and my first real delve into canvas stuff, so it is a bit of a learning curve. But I think it will be fun, and if nothing else educational plus good practice.

[zourtney]

As promised -- for those lucky enough to have read access -- here is the project using RequireJS:
https://bitbucket.org/brilesb/robot-td/branch/requirejs

I just did a quick run through the files, wrapping up file contents as modules, defining dependencies, and trying not to break anything. The only functionality I saw was the StateManager showing TitleState and MainMenuState, and a few click handlers (that I had to tweak). I probably missed something, so let me know when you find something fishy.

[zourtney]

Yay, my first ever pull request got merged in!

I created another branch called build-tools. There are no (significant) source codes changes, but I made way for:

 
• 3rd-party dependency management via bower
• Minified distributable builds via grunt

If you want to try it out yourself, get nodejs and install the grunt command line utility. This is your ant-/maven-like task runner which can be made to do just about anything.

Code Select Expand

npm install -g grunt-cli

Then, from the project directory, install the node_modules needed to run grunt tasks, optionally get a fresh copy of the bower-controlled libraries, then kick off the dist task.

Code Select Expand


npm install
bower install
grunt dist


The result is a minimal distributable build stored in a top-level dist folder with:

• index.html
• require.js
• main.js
• main.css

I probably didn't explain that nearly well enough...so just ask


Edit: sorry if this was too radical / overwhelming. I've just been playing with this stuff a lot lately, so I was able to whip it up fast. It's in a branch, so you can always delete it easily It won't hurt my feelings at all.

[Brad]

In the latest commit I've fixed image loading with the asset manager and wrote a really simple random map generator.

Also, TileMapRenderer is working now so the map is actually drawn to the screen in the game state.

Also, Also, there is now a tileset PNG asset in the repo. So if anybody wants to contribute in a non-programming way then there is a place for working on tiles and updating them to the repo. The tiles are 20x20 pixels, the map is 40x30 tiles.

[Brad]

So I switched the Map renderer over to drawing to an off-screen buffer. It draws the tiles to this buffer only once, then every frame it draws the buffer to the screen. This should be much faster than drawing tiles individually every frame. Due to crappy web hardware acceleration this is necessary so the game will run smooth on weaker hardware (like phones).

Luckily we dont have any scrolling so is this really easy to do. With a bigger map we'd need to tweak the drawing to the buffer so that it would draw tiles at the edge of the map as you scroll. Maybe for next project