So I attended my second meetup ever this week, and even got to present on some useful resources for wordpress developers, designers and general users. Here is a quick recap of my presentation, along with a few other things mentioned at the meetup.
5 Useful Resources (for WordPress)
My topic was "5 useful resources" for wordpress, and originally I was going to start off with version control with svn or git - but I later decided to tone it down a little and focus on things that would help non-developers (which ended up being a good decision). Here's what I finally settled on:
Balsamiq Mockups is an AIR-based cross-platform program / web-app with the sole focus of making the conceptual design process smoother. It allows you to focus on the main elements of a website (or app) without getting caught up in the small trivial details.
Here's a good example of how Balsamiq can be useful. The design above (credit: http://dhrandy.deviantart.com/gallery/#/d24j5v8) is a typical mockup you may create for a client or yourself. If the client isn't picky about design, then this can be a very fast way of getting things done. However, if you present a website mockup in the beginning stages, and really just want to get the layout down as opposed to the final design - then sometimes you can get caught talking about what fonts to use, gradient colors, which images to use, etc. I've been in countless meetings that had to wrap up without much progress because of so much focus on these trivial details early in the process. Here is why Balsamiq Mockups is so awesome.
As you can see nothing on this mockup can be taken literally, and instead of discussing gradients or logo treatment, we can focus on the overall design first. This is one of the most useful tools I've discovered in the past few years, and it truly does make life much easier. It's extremely easy to use, so that non-designers and non-developers can flesh out ideas in detail, without getting overwhelmed or losing their concepts in translation by technoical jargon. Most of the time, the benefit of using Mockups can be seen instantly - the first project you use it on. It's a paid product, but there is a free 7 day trial, which should be more than enough time to decide whether it's right for you or not.
LastPass helps you deal with the endless number of passwords to keep track of. Aside from personal passwords to remember, some of us may also have long lists of personal or client blogs to manage. Not just that, but to be secure about it - each password really should be unique. Oh, and passwords should not be kept in plaintext files. So what the hell is the solution? This one is easy.
LastPass not only keeps track of all your logins, but it can login automatically for you across all browsers, platforms, and mobile devices. If you have an internet connection, you will be able to login to any website you need to. It's pretty self explanatory and well worth looking into. A couple people at the meetup mentioned similar solutions like KeePass, which is essentially the same idea however LastPass is used strictly within a web browser, and stores passwords for websites. KeePass and similar programs can actually store much more information like credit cards, serial numbers, etc. however I haven't found anything else out there which is as easy to use as LastPass.
#3: Using a VPN (Virtual Private Network)
Every once in a while, a site that should be up, just magically goes down. No response, nothing. Also, sometimes a site will look fine to me but a visitor or client will swear they can't get to it. Is it cached? Network problem? Who knows? The very first thing I do is check a website called "DownForEveryoneOrJustMe.com" although it's also got a much shorter URL: IsUp.me
Most of the time, the site is up and there is just a temporary network issue somewhere along the line. However, if you are ever wondering if a site is being blocked, filtered, or just down for you - this is a quick way of determining the answer. That brings me to the real solution though, in case you are being filtered or blocked for some reason, VPNs can help out a lot. To anyone that has to work behind a firewall or in secure environments this isn't anything new - however even if that doesn't describe you, VPNs can be incredibly useful. The solution I currently use is WiTopia, since they were rated best on Lifehackr and had very competitive prices.
The other big advantage of WiTopia was the number of locations you can connect from. Basically, your internet connection is routed through one of these locations, so you can bypass caches, firewalls, and see for yourself if there are problems with your website. Not to mention, this also allows you to access sites that are otherwise international. If you've ever tried accessing American media from overseas and been blocked due to copyright laws, this fixes that as well (and vice versa - as someone asked if this would allow you to watch BBC videos online from within the US - yes!).
#4: Dropbox + Portable Apps
Another Resource which is part of my everyday routine is Dropbox, especially in conjunction with portable apps. In a sentence for anyone not familiar - dropbox is basically a folder that keeps all files inside of it synchronized across your computer, laptop, mobile devices, etc. Traditionally it's used for sharing documents, backing up files, etc. However it can also be used as a "usb thumb drive" that sits in the cloud, which you can install software to.
The specific software I mentioned was HeidiSQL, Notepad++, and FileZilla, although here is the full list of portable apps I have installed on my dropbox:
- FileZilla (FTP/SFTP/SSH client)
- HeidiSQL (SQL client)
- HostsMan (edit windows hosts file easier)
- PuTTY (telnet/ssh client)
- Skype (instant message client)
A great resource for more apps is PortableApps.com:
#5: WordPress Migration Script
Here's a scenario that can be a pain. If you are putting together a wordpress site locally on your machine before pushing it to a production server, during the database migration any text referencing your old localhost address could still need to be updated. The Migrate script makes that much easier. All you do is enter the current URL, then the replacement URL, and hit go. The script will detect any changes that need to be made before asking you to confirm them. This is also very helpful for moving a blog to a new domain name.
Bonus! WP Smush.it
This was something I had never heard about before the meetup, and an awesome tool I've already implemented on this website: WP Smush.it. It basically just compresses all of your image files for you, and can do it in one big batch. Within 5 minutes I had installed it, and used it to compress all uploaded images pretty easily. Highly recommended!
The wordpress meetup was great, and I'm looking forward to many more meetups in general. BarCamp Orlando is next month as well, which is like a 100 meetups in one, spread all over downtown Orlando bars and pubs. I'm not sure how many locals check out my blog, but if you're in town - make sure to be there!
Here's something a little different. Anyone that's known me personally for a while probably knows I have three main passions: music, technology, and researching conspiracy theories. I get some flak for it occasionally, however it's usually just the typical tin foil hat reference which is always expected anyways. However, alternative history and just world history in general has always fascinated me. Anyways, long story short, soon I'll be posting up some reviews of books and documentaries in addition to the usual programming stuff. As always, feel free to post your comments, whatever your take.
As a quick preview, here are some of the books and documentaries I'll be reviewing soon:
Documentary: Kubrick's Odyssey
Created by Jay Weidner and produced by "Cubed Brick Productions" (get it, Kubrick? Cubed-Brick? ha... anyways...) this documentary is extremely fascinating. Without giving away all the best parts, it's about how Stanley Kubrick was offered the job to fake the Apollo 11 moon landings in a soundstage. The argument is made that through photo analysis, the same exact technology used for the moon landing shots was later used for 2001: A Space Odyssey. Specifically, the technology was a 3M fabric coated with very tiny mirrored beads of glass which acted as a backdrop for the scenes, sort of like the first version of chromakey (aka "green screen"). Furthermore, this documentary tries to show that The Shining was Kubrick's attempt at exposing his involvement in one of the biggest coverups in American history. Best of all, this documentary is just one in a series aimed at decoding all of Kubrick's work, up to and including the movie that "killed him," Eyes Wide Shut.
This post will cover some extremely useful third party tools (both free and paid) for Corona developers (specifically on Windows).
Since starting with Corona SDK in 2011, I have really taken a liking to it. It hasn't replaced my other solutions yet , and I'm not sure that it ever will.. but truth is, it doesn't have to replace anything. Corona seems to be in a good niche all to it's self, despite the pugilistic attitude towards Adobe's Flash/AIR/etc. Unlike Flash however, which has a robust IDE and large suite of complimentary applications (Photoshop, After Effects, Illustrator, etc.) Corona is bare-bones, really just an API bundled with a simulator and compiler. Once you get comfortable with the basics of Corona and are ready to dive in a bit deeper and make your workflow easier, here are some great tools:
Various software that can save time and really help out specifically with Corona development.
(texturepacker.com - free version available, Pro: $24.95)
TexturePacker is essential for creating spritesheets in Corona (it also exports to Unity3D, css, json, cocos2d and others). To put it simply, TexturePacker allows you to drag and drop a folder full of images (swf, png, jpg, bmp) and automatically create a spritesheet / tilesheet image, and an exported program specific template. There are quite a number of options to set, such as layout algorithms, padding, trimming transparency, and a host of other optimizations. Personally, I found this useful when creating large spritesheets of animated assets - for example, the sheet below:
Final Thoughts: If you need to create lots of spritesheets, the $25 spent on this program will repay itself after the first hour or two you save yourself in time and frustration. I cannot recommend this program enough to anyone creating sprite-based games in Corona, or any other program for that matter.
After attending the first Orlando Corona SDK Meetup this this week, I was really inspired by Ansca Mobile's Carlos Icaza to begin cranking out games. In fact, I've already started on my New Year's resolution - create and publish at least 4 (mobile) games next year. After lots of consideration and testing, I'm pretty much set on using Corona for all of them. I'm still holding out lots of hope for Adobe AIR, and would love to create games for mobile with Flixel and FlashPunk - but I just can't get the performance I'm looking for (yet).
With that said, the first game is actually part of a larger project I'm working on, but the general game design is a bit like a fast-paced Gun.Smoke:
The biggest things I'm struggling with now are the controls and orientation. Currently, there is a virtual joystick in the lower right corner to move the player. I've tried just using the touch screen, but then your finger covers up more real estate when playing. The real estate issue is the same reason I took away the left/right fire buttons on the left. I'm also deciding on whether or not to allow the player to shoot left and right, or restrict the player's attack to straight up (like 1942).
The funny this is that when creating similar games in AIR, I would have still been messing around with compiling and optimizing, so worrying about game design and UI issues is a welcomed task. On the other side of that coin, when I needed to make a wave (level) editor for my game the first thing I thought of was Flash/AIR , which worked out great. With the wave editor, I'm able to start putting together some strategic layouts. There's no real AI for any of the enemies yet, but I do plan on adding that soon too.
Since the top-down shooter project is probably going to take at least a few more months, I've also started on another game. While it's starting out as a Peggle Clone (which I'll probably use to write a detailed Corona SDK tutorial), I've got a few ideas in mind of where I'd like to take it eventually. I'm hoping to release this one as soon as March, and continually update and improve upon it. For a quick preview of where I'm at after 6 hours, here's a video:
Finally, it's been a while since I last posted - and due to the holidays, it may be another while until the next one. So just to throw out there... I've also been working a LOT with AIR/Android development, along with using PhoneGap and jQuery Mobile with a few projects.
I realize that so far this blog might seem a bit Flash/Corona biased, but there are so many other cool projects and technologies I've been working with, that I can't wait to write about soon. Thanks to all the new readers that have been visiting, and feel free to drop me a message/comment about any tutorials or articles you'd like to see.
Yesterday at Adobe MAX, Adobe announced a major upgrade with AIR 3. Along with a host of improvements and new features, the main ones that caught my eye included "new architecture for high-performance 2D/3D GPU accelaration," and improved mobile support. Actually, those two items combined highlight my biggest concern with AIR - performance.
For making productivity or utility apps, AIR is a great choice (depending on the level of control you need over native functions). However for mobile apps that involve lots of movement and listeners (i.e. games), it hasn't been as much of an option. The performance issues alone turned my interest to Corona SDK, since it allows developers to target multiple devices with the same code and assets (and maintain performance to an extent). read more...
This post is a break from the normal topic of programming, but has the same level of geekery/technobabble that you have come to expect from my blog. Over the past few years, media usage and needs have been changing/evolving to the point where some people almost completely rid of physical CDs, DVDs, even books. There is also a "cut the cord" movement that emphasizes cutting out any services that you don't make full use of (e.g. cable TV), and favor anything which makes media consumption more convenient.
Here is a quick description of the perfect HTPC / Media Server: Something that can automatically download, repair, extract, gather information on, rename, sort, and play back movies, tv shows, albums, ebooks, games, and even comic books - while making all of the content remotely accessible via browser, mobile-devices, etc. Oh yeah, and it should be able to run 24/7 while using less energy than a (incandescent) light bulb.
While there are a million and a half ways to setup an HTPC (Home Theater PC) / Media Server, I'm pretty satisfied with my current setup, so I thought I would share. In a nutshell, I built a mini-ITX system (for less than $400, which runs at less than 50W) running a combination of Sabnzbd, Sick Beard, Couchpotato, Subsonic, VNC, XBMC, Maximus Arcade and a few other small utilities. With an exception to Maximus Arcade, all of this can be setup using any hardware/OS combination (Windows, OSX, Linux) that supports Java and Python.
Update 10/08/2011: Instead of making another post to highlight other issues with Corona, I'll just continue to update this article.
The Corona SDK is starting to become more and more popular among developers. In fact, my tutorial on setting up Corona for Windows development is still the most popular post on this site. Since I've posted, lots of other great game developers have been posting about Corona, along with Jesse Warden, who seems to have been making all sorts of contributions. In fact here is a video from Jesse Warden that is almost 2 hours long, covering the process for developing in Corona (on a Mac). Needless to say, there is lots of momentum and excitement surrounding Corona, and I'd say with good reason. Corona is a great solution for creating games quickly, which will work on (most) Android devices and iOS. Even with all of the Ant or Maven scripts in the world, it doesn't seem like there has been an easier solution made for cross-platform development yet.
(image credit: John W. Iwanski aka Chicago Man) read more...
My latest project requires a brief explanation, as it solved a very particular problem. As a musician, it's pretty common to see my work posted (pirated) all over youtube, myspace, last.fm, etc. To be honest, I'm happy my music is getting exposure, either through iTunes or ThePirateBay - makes no difference to me. With that said, the problem I found is that it's difficult to get an idea on how much exposure all of the music is getting, whether I uploaded it, or if it was uploaded by someone I never met. My solution to that problem is something called SumFans.
Click here for a demo of SumFans
When you post a video to your own youtube account, there are plenty of stats to look at. However, if your media was posted on someone else's account, it's much harder to get the same stats. That's where this project started - as a way to easily calculate all of the views my music has gotten, regardless of what account it was posted under (or even what site it was posted to!). After a few long nights of coding and reading through lots of APIs, I came up with SumFans (I liked "FanSum" better, but it was taken).
The final result uses a few different components:
- PHP - handles communcation with database
- mySQL - database that stores all media information, and a log of views
- JS - lots of different jQuery libraries (UI, flot, tinysort, prettyPhoto, textshadow)
- crossrider - an awesome service that allows you to create cross-browser compatible extensions.
- APIs - mostly REST calls for last.fm and YouTube (via gdata)
Since Flixel 2.5 was just released, I've been having fun playing around with a few things, like the new camera system, pathfinding and a few other features. I've also been trying to integrate some networked multiplayer gameplay, and one of the first things I needed to do was remove the built-in automatic pausing whenever the stage loses focus. After searching google (and the code) for some solutions, almost all of them required changing the flixel code. Instead, here is a pretty simple solution you can add to your main class (which should be extending FlxGame)
[SWF(width="640", height="480", backgroundColor="#000000")]
public class MyFlxGame extends FlxGame
public function MyFlxGame()
super(320, 240, PlayState, 2);
override protected function create(FlashEvent:Event):void
As you can see, this simply removes the event listeners from ever getting the message that focus was lost. Hopefully this may help someone else out there looking to do the same thing. It seems odd there isn't some kind of FlxG.autoPause variable to turn this on/off a little easier.
In the last part, we covered most of the code in the tutorial, with exceptions to the TilemapGeneratorEntity and FlyingEntity classes. Let's jump right in.
To try and explain it simply, the TilemapGeneratorEntity basically parses an XML file for tilemap information, along with any sprites (like enemies or powerups) we've created within DAME. It then creates a graphic to represent the tilemap, a graphic to represent the hit area to collide with, and optionally creates sprites (like enemies) and adds them to the game. Take a look at how a new TilemapGeneratorEntity is instantiated on line 73 of TestWorld.as:
var testMap:TilemapGeneratorEntity = new TilemapGeneratorEntity(Assets.LEVEL_TEMPLATES_XML, Assets.BG_TILES, mapLayer, "level", _totalMapsWidth, 0, true, false);
9/3/2011 Update: Added some changes to the process, updated screenshots, and disclaimers regarding Java JDK v6 and the new Corona requirement of Android OS 2.2+ and ARMV7. I've expanded on the hardware shortcoming and a few other annoyances and issues in a new post: Where Corona SDK Falls Flat.
Developing mobile apps and games for both Android and iOS (iPhone/iPad/iTouch) is not the easiest thing in the world. For iOS, the main option is to develop in Objective-C with Xcode in OSX. However, if you want to develop for Android, there are a few more options - although most of them still require recoding when porting to iOS. One of the biggest options for cross-device development is the Adobe iOS Packager for Flash/Flex/AIR. All the code can be done in Actionscript 3, and then deployed to either device (and for free!). The downside of this, is that without serious tweaking and compromise, the framerate on games is subpar. In time, I'm sure Adobe will smooth things out, however as it stands, it's very limiting to work with the packager. Enter the Corona SDK:
Corona SDK is basically a Lua library that wraps both Android and iOS functions into a single API. In this article, I will show you how to setup an environment for developing with Corona, complete with code auto-completion, basic error checking, and an example of a box2d physics app running in both the simulator and an Android device. All in less than 2 minutes. Haha ok, maybe not that quick, but seriously, it takes about 15 minutes to be up and running, since there are a few things you will need to download and install. Then, the actual box2d app will be less than 10 lines of code. read more...
Recently I've gotten back into some fairly intensive PHP coding which required a deeper level of analysis than simple echo statements and standard error messages when debugging. Personally, I use XAMPP for my testing servers, so here is a tutorial for setting up XAMPP and Xdebug for testing. I'll also show the steps for setting up your IDE (either Netbeans or my preference, Jetbrains PHP Storm). read more...
After covering various game engines and level editors for flash, the project layout, the DAME templates, the XML format of our levels, and the Lua export script, we're finally ready to get into the ActionScript. Along with learning Lua in the last step, this was also my first experience using FlashPunk. As I mentioned in part 0, after experimenting with Flixel and PushButton, FlashPunk just seemed to work closer to the way I design games in my head (and on paper).
The overall structure of the code is pretty simple. Take a look at the following diagram, which illustrates the components used in the tutorial.
In the fourth part of this tutorial, I'll finally get into the Lua code. Since this was my first experience with Lua so far, I'll also include some thoughts and other tutorials I discovered in the process. Here are links for the previous parts in the tutorial, 0, 1, 2 and 3. As always, if you haven't already downloaded the project files, grab them here.
Since I'm still brand new to Lua, I won't go into the language itself, since the syntax is very similar to ActionScript. What is important to read over though, are the DAME functions to make use of within the Lua scripts. These custom functions are what makes everything happen, and I spent a few hours reading over the complete list of them in creating this exporter.
First of all, you will need to copy both of the Lua files in this project (FPDameTemplatesTutorial.lua and FPDameTemplatesTutorial_settings.lua) into the lua/Exporters folder within the DAME installation directory (mine was C:\Program Files\DAME\lua\Exporters).
The settings file (FPDameTemplatesTutorial_settings.lua) is only used for displaying a description and additional options within the DAME export window. For a reference, this is what the export window will look like when using the FPDameTemplatesTutorial_settings.lua file:
Since I've already covered some of the various game frameworks for Flash, decided on a project to make, and explained all of the components within the project - I think it's finally time to get into some code. If you haven't already downloaded the project files, grab them here.
First, take a look at the XML structure we'll be using:
<tiles layer="template4" x="1440" y="0" width="480" height="480" tileWidth="32" tileHeight="32" widthInTiles="15" heightInTiles="15" >
<tile tx="96" ty="0" x="0" y="0"/>
<sprite className="Balloon" x="1484" y="349" width="35" height="45" points="1" />
<sprite className="Balloon" x="1621" y="2" width="35" height="45" points="1" spawnShape="74A916C5-C96B-62BE-6540-024B6D1237CB" spawnAmount="2" color="0x00ff00" />
<sprite className="Balloon" x="1818" y="73" width="35" height="45" points="1" />
<sprite className="Balloon" x="1750" y="343" width="35" height="45" points="1" spawnShape="74A916C5-C96B-62BE-6540-024B6D1237CB" spawnAmount="5" />
<sprite className="FlyingPig" x="1843" y="1" width="60" height="51" spawnShape="5E3E76E3-431E-E1E1-B26C-930B32DB8AB1" spawnAmount="5" />
<sprite className="Balloon" x="1629" y="346" width="35" height="45" points="1" />
<shape type="rectangle" x="1663" y="286" width="191" height="159" guid="74A916C5-C96B-62BE-6540-024B6D1237CB" />
<shape type="rectangle" x="1659" y="64" width="257" height="160" guid="5E3E76E3-431E-E1E1-B26C-930B32DB8AB1" />
It looks a bit complicated, but it's really not at all. First of all, notice that I've only included a single line for each tag. In reality, the entire file is over 1000 lines long (don't worry, Lua does all of that for us!). On line 1 you can see that the root node for the entire XML file is called level. This could be called anything, usually it's just <xml> but in this case I went with something that made sense to me. read more...
Welcome back to the next step in this tutorial series. Here are the first two parts, where I covered the different software and languages being used.
The last part briefly went over the level design concept, so let's go further into each "Template" before moving on.
Each "template" in this tutorial consists of a tilemaps layer, sprites layer, and shapes layer. The first four templates are all 15 x 15 tiles. Since each tile is 32px wide, templates 1-4 are all 480px by 480px. In this first image, you are seeing the tilemap, sprite and shape layers titled "template1." As you can see, it consists of a few obstacles on the tilemap layer, four balloons and two clouds on the sprite layer, and a circle on the shape layer. The circle will not be used, other than to show how we export it into XML via Lua. Also, notice the settings window on the right, which reflects the 15x15 tiles in the tilemap, and the 32px by 32px size of the tiles. The rest of the settings are either default, or calculated automatically by DAME.
If you haven't read the first part of this tutorial, do that now (or don't if you just want to jump right in). The last post was a long explanation of how I ended up with the specific combination of FlashPunk and DAME (and Lua). In order to follow along, I will assume are either using FlashDevelop, or understand how to use this tutorial with whatever IDE you are using (Flash CS3/4/5, Flash Builder, etc.). For instructions on setting up FlashDevelop with FlashPunk,
check out this tutorial (here's a link to an archive full of tutorials, since they have been taken offline: http://dl.dropbox.com/u/1526979/MattHubfolioArticles_HTML.zip). I will also assume you already understand the basic concepts of inheritance, and extending classes in ActionScript 3. If not, feel free to follow along anyways, but I recommend this tutorial, and this book. And just for a quick peak at what we will be creating, here is a screenshot:
This is a fairly lengthy post, which is an introduction to the next tutorial series I will be posting. If you don't care about the how, when or why, here is the quick version: Motivated to develop more flash games, I tried learning PushButtonEngine for the nth time, but still struggled grasping all of the concepts. Then I tried learning Flixel for the nth time, but still struggled with committing all the classes and workflow to memory. In attempt to keep trying to learn Flixel, I saw a post about creating a level with Flixel and DAME. Unfortunately, the tutorial ended before it actually got into Flixel, but I really fell in love with this app called the DAME Editor. After noticing that DAME came with a FlashPunk exporter, and after realizing I had never really tried FlashPunk, I decided to give that engine a go as well. Turns out, FlashPunk was just what I had been looking for, and now I've decided to write a tutorial on using FlashPunk, DAME, and incidentally, Lua. Phew.
Well, that was the short version. For the long version, please read on: read more...
For the fourth part to this tutorial, as promised, I will start introducing some graphics. I started by sketching out a very rough example of the room our virtual character will live in, then I sketched out a gui - which for now is really just a rectangular frame.
After a bit of time using my Wacom in the Flash IDE, I recreated the sketches in vector format, and then separated them into MovieClips and Graphic symbols.
I put together a quick example of a slot machine in AS3 in about 15 minutes, and under 100 lines. It can still be optimized a great deal, and I will probably make some updates to this in the near future. One of the requests of the example, was an ability to hold matching reels. So in this example, once 2 of the reels in the slot machine match, those will not respond to the spin() function anymore. This will be changed around a bit future updates, to act more like a typical slot machine that does not have this feature.
here it is in action on wonderfl
The explanation (or tutorial) part of this post will be complete soon. I will also optimize the code in the next couple of posts. Until then, take a look at the code and try to understand what's going on. read more...