logo
468x60-2-495


  • Home
  • Privacy Policy
  • About
search
top
Currently Browsing: Hints and Tips
May 5, 2012 Posted on May 5, 2012 in Hints and Tips | 10 comments

Workshop: Utopian Mining – Critique

Today, Matt Porter takes a look at a recently released mining game, currently doing very well on Newgrounds: Utopian Mining, developed by Schulles.


Play the Game


Click to play on Newgrounds

Overview

Utopian Mining is one of the most polished RPG digging games I’ve played on the web in some time. It does so much right that it stings horribly when you do come across its few faults. My expectations were set high after seeing the excellent scores on Newgrounds and playing for a few moments, but I quickly learned that the game wasn’t all my hopes had wanted it to be.

My high expectations aside, there’s a lot to be learned from this wonderful little (emphasis on little) game.


Gameplay

The object is simple. You’re a tiny mining robot hanging out in a town that was recently destroyed by a horrible storm, and you need to collect materials while digging to get the town up and running again. There’s been a decent number of games in this genre over the years, and they’ve always done quite well in the eyes of players; quite well for sponsors too seeing as they continue to get sponsored by large sites such as Newgrounds and Kongregate. There’s definitely some concrete evidence as to why they do so well, which I’ll go over shortly.

Utopian Mining doesn’t really mix things up too much from your standard RPG digger, but it does add a few (extremely linear) quests, as well as a bit of story. Quests generally consist of giving someone money or a certain material, all of which is laid out in the exact order you would achieve if said quests didn’t exist, making the quests more of an illusion than anything.

The game appears to be a lot more content filled at first, especially when new buildings rise as you complete quests, and you learn of a beach far to the east, but it quickly becomes apparent that these changes hardly affect gameplay and are mostly visual fluff. Buildings give a small discount in restoring power to your robot, and the beach is used to get sand for a quest just once (yes, once). This visual fluff is of course a welcome addition, especially in the eyes of sponsors, but I fear that these quests will quickly feel shallow to the average player, leaving them with a desire for just a bit more depth. I would have loved to see quests be less linear, and to have them alter how the game is actually played. Unlocking new upgrades in the shop would have been great incentive to complete a difficult, and not immediately rewarding quest. In addition to these faults, the player also isn’t alerted when a quest is complete, which seems like a no-brainer for an otherwise very polished game.


The beach

The largest flaw of the game is that it’s so simple it becomes ridiculously easy to complete. It’s so unbalanced, that if it wasn’t short, slightly addicting, and quite charming, it would likely fail to be a decent game. Many players, such as myself, often skip cheap upgrades, and save up for the next reasonable purchase. This may take an extra five or ten minutes to do early on in the game, but it generally pays off. The same is true for buying equipment in games such as Final Fantasy, or really any game that offers an upgrade system of some sort.

The problem with Utopian Mining, is that it doesn’t only pay off – it actually destroys whatever challenge may have ever existed. I beat the entire game within an hour, and wasn’t remotely challenged beyond the first five minutes; in fact, my robot never even died. Generally speaking, the challenge of a game should increase as you go on, but Utopian Mining simply gets easy, whether you skip upgrades or not. Schulles (the developer) simply didn’t pay enough attention to the balance of the game, and it unfortunately reared it’s ugly head for me, and from the looks of other reviews, many other players.

Close to death, but never in any real danger.

While casual gaming is fun, it’s important to challenge players, or at least make them feel like they completed something difficult, even if “difficult” simply translates to time consumption (a common tactic of MMORPGs). While I don’t want to write out a game design document in this review, a simple addition to make the game more challenging would have been more hazards, such as lava pits. As it is, going deeper and running out of energy are the only things that can kill you, and that obviously doesn’t really work.

One of the more minor flaws, in my opinion, is the rather clunky user interface. For an example, let’s look at the shop screen:

To navigate the shop, you must press 1-4 to switch between categories (chassis, drill, batter, cooling liquid), use the arrow keys to go up and down, X to select, and C to exit. I love retro games, and I’m all about ditching the mouse when it really isn’t needed, but this wasn’t one of those times. There’s no reason to neglect the mouse for a simple shopping interface, especially when it would be faster and less frustrating to use for the player, and could work alongside keyboard controls as well. There’s no reason to annoy your players because you feel like being truly retro; give players an option, and both casual and hardcore players will be happy.

While Utopian Mining has its flaws, as almost all games do, it does a lot right. It takes everything you’d expect from an RPG digging game, strips it down, and polishes what little it has to an extreme. It’s basic, but it’s addicting, and for any game developer, that’s a good thing. Getting players to return to your game is not only great for increasing views, but it also helps developers gain more recognition, and both sponsors and developers will earn a decent bit more revenue, assuming the developer put ads such as Mochi or CPMstar in their game.

The unfortunate side to this, for Utopian Mining, is that the game isn’t quite long enough to ensure a returning play from most players, as it’s generally beaten in the first sitting. As far as the core mechanics go, they’re addicting. The game lacks any sort of real depth (aside from the digging bit [that was a terrible pun - Ed.]), but that aside, players seem to get addicted, and want more. The core mechanics of the game are undeniably an extremely strong point, and seeing them presented in such a polished manner has appeared to be an easy win for game developers.


Graphics

I’ve said it before, and I’ll say it again: I absolutely love retro and retro-inspired games. Utopian Mining offers some very nice looking retro graphics, which instantly earn my approval. The world is charming on the surface, and while a bit bland below, it’s done well enough to please the eyes. The animations are extremely simple, but they get the job done, and there’s no need for more.

As far as details go, the game doesn’t skimp out, and there’s actually a decent attention to detail. The ground gets darker as you go deeper, digging has a cool particle effect of dirt flying out, and warnings appear in a simple, but cool fashion across the screen. Overall, the graphics are top-notch for a retro-inspired style, and I wouldn’t change them a bit.


Audio

The audio is also extremely well done in Utopian Mining, and has very little room for improvement. The music on the surface is excellent and charming, which sets an immediately positive mood for players. Upon digging and going below the surface, the music instantly changes with a nice fading touch, which is a great addition.

Sound effects are nicely done, even if a bit simple. I would have appreciated some variation when collecting different materials, but that’s a minor piece of polish the develop chose not to include. All in all, the sounds are quite fitting, retro, and very well done.


Conclusion

Utopian Mining is undeniably a great game, it’s just a great game that has been done before. What I appreciate most about it, is that it takes the core mechanics, leaves behind the extras, and makes the game shine nonetheless. It’s an excellent game for developers to study, as there’s very little to it, yet it’s quite successful. I know my interest has been piqued by it, and I plan to explore development in the genre myself. All in all, Utopian Mining is a charming and simple game that can pass some time for the casual gamer, teach some important lessons to game developers looking for them, or both.


Your Turn

What do you think of Utopian Mining?



View full post on Activetuts+

May 2, 2012 Posted on May 2, 2012 in Hints and Tips | 10 comments

Using ASAudio for Easy Flash Sound Playback

In this short tutorial I will introduce you to ASAudio, and AS3 library that greatly reduces the amount of code needed to create and manipulate sound object in your ActionScript projects.


Step 1: Examining ASAudio

ASAudio is an ActionScript 3 library that greatly reduces the amount of code needed to create and manipulate (volume changes, pan) audio files’ within your ActionScript Projects. Traditionally you would need to do the following to load in, play, and change the volume of a Sound within ActionScript:

var urlRequest:URLRequest = new URLRequest("path/to/track.mp3");
var sound:Sound = new Sound(urlRequest);
var soundChannel:SoundChannel = sound.play();
var soundTrans:SoundTransform = soundChannel.soundTransform;
soundTrans.volume = .5;
soundChannel.soundTransform = soundTrans;

With ASAudio all you need to do is the following

var track:Track = new Track("path/to/track.mp3");
track.start();
track.volume = .5;

Step 2: Getting the Library

Head over to the project’s Google Code page and download the latest version of ASAudio.

Once you have downloaded it, extract it and copy the the “com” folder that is inside the “src” folder to the folder where you will be creating your ActionScript project.


Step 3: New ActionScript Project

Start a new ActionScript project, and save it in your project folder as “asAudio.fla”. Under the “PROPERTIES” panel, set the stage color to white and give it a width and height of 500x150px.

Now create a new ActionScript File and save this as “Main.as”. Set this as your Document Class.


Step 5: Imports and Constructor Function

Add the following to the “Main.as” you created in the step above.

package  {
	import flash.display.Sprite;
	import com.neriksworkshop.lib.ASaudio.*;
	import flash.media.Sound;
	import flash.events.MouseEvent;
	import flash.events.Event;

	public class Main extends Sprite {

		public function Main() {
			trace("Working");
		}

    }

}

Here we import the classes we will need throughout this tutorial, and setup our Main() constructor.


Step 6: Track

The Track is the fundamental class of ASAudio. Everything you do with the library depends on the Track. In this step we will create a new Track, and play it. Enter the following code above the Main() within “Main.as”.

var track:Track = new Track("BoozeandBlues.mp3");

And the following within the Main() constructor.

public function Main() {
	track.start();
}

To create a Track you pass in a path to the mp3. We then call the start() method of the Track within Main().

If you test now you should hear the mp3 play.


Step 7: Setting up the Interface

In this step we will setup the interface for the project so we can control our Track‘s.

From the Component Window drag 4 buttons and a slider onto the Stage. You can get to the Components Window by choosing Window > Components or by pressing CTRL+F7.

Give the buttons the following properties, one by one.

  • X: 21.00 , Y:61.00, Label:”Play TracK”, Instance Name:”playTrackBtn”
  • X: 175.00, Y:61.00, Label:”Play Group”, Instance Name”playGroupBtn”
  • X: 333.00, Y:61.00, Label:”Play Playlist”, Instance Name”playListBtn”
  • X: 21.00, Y:100.00, Label:”Stop Track”, Instance Name”stopTrackBtn”

Here is a screenshot of the first Button’s setup.

Give the slider the following properties.

  • X: 21.00, Y:29.00, Instance Name:”trackSlider”
  • maximum: 1
  • miniumum: 0.1
  • snapInterval: 0.1
  • tickInterval: 0.1
  • value: 1
  • liveDragging: “Make sure it is checked”

Here we set some initial values for the slider. I won’t go over them as you can refer to my Quick Tip that covers the sliders functionality.


Step 8: Controlling the Track

In this step we will code the start, stop, and volume functionality for the track we created in the previous step. Add the following to “Main.as”.

public function Main() {
	addListeners();
}

private function addListeners():void{
   trackSlider.enabled = false;
   playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack);
   stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack);
   trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume);

}

Here we call the addListeners() function within our Main() constructor. Inside addListeners we set the disable the trackSlider and add Listeners to 3 of our buttons.


Step 9: playTrack()

The playTrack() function will tell the track to start playing. Add the following beneath the addListeners() function you created in the step above.

private function playTrack(e:MouseEvent):void{
   trackSlider.enabled = true;
   track.start();
   track.volume = 1.0;
}

Here we enable the trackSlider play the Track using the start() method and set the volume of the track using the volume property.


Step 10: stopTrack()

The stopTrack() function will be used to stop the Track. Add the following beneath the playTrack() function you added in the step above.

private function stopTrack(e:MouseEvent):void{
	track.stop();
}

Here we simply call the stop() method on the Track.


Step 11: adjustTrackVolume()

The adjustTrackVolume() function will be used to adjust the volume of the Track. Add the following beneath the stopTrack() function you created in the step above.

private function adjustTrackVolume(e:Event):void{
   track.volume = e.target.value;
}

Here we set the volume of the track equal the the sliders value property. Because we set the maximum to 1 and the minimum to 0.1 it will always be a number between 0.1 and 1.0 incremented by 10ths. i.e 0.1, 0.4, and so on.

If you test the movie now you should be able to play, stop, and adjust the volume of the Track.


Step 12: Groups

You may have been wondering what the “Play Group” button was for? Well, along with offering basic the basic Track ASAudio has a notion of “Groups” which allows you to stack sounds together and play them together all at once. Add the following within the addListeners() function you created in the step above.

 private function addListeners():void{
   trackSlider.enabled = false;
   playTrackBtn.addEventListener(MouseEvent.CLICK,playTrack);
   stopTrackBtn.addEventListener(MouseEvent.CLICK,stopTrack);
   trackSlider.addEventListener(Event.CHANGE,adjustTrackVolume);
   playGroupBtn.addEventListener(MouseEvent.CLICK,playGroup);
}
 

Here we add a Listener to our playGroupBtn that will call the playGroup() function. We will code this next.


Step 13: playGroup()

Add the following beneath the adjustTrackVolume() function you creafted in the step above.

 private function playGroup(e:Event):void{
   var group:Group = new Group( [new Track("piano.mp3"), new Track("drumbeat.mp3")] );
   group.start();
}

Here we create a new Group by passing in an Array of tracks. We then call the start() method which tells the Group to start playing.

If you test now you should hear the “piano.mp3″ and “drumbeat.mp3″ playing simutaneously.


Step 14: Playlist

Along with offering the Group, ASAudio has a notion of a PlayList. The PlayList is like a playlist on an MP3 player. You “queue” up songs and when one finishes it continues to the next. Add the following within the addListeners function.

private function playPlayList(e:Event):void{
   var playList:Playlist = new Playlist( [new Track("piano.mp3"), new Track("drumbeat.mp3")] );
   playList.loop = false;
   playList.start();
}

Like the Group we create a new PlayList by passing in an Array of Tracks. We set the PlayList to not loop and call the start() method.

You can now test and see the PlayList in action.

Conclusion

You have learned about ASAudio and seen how it can greatly reduce the amount of code needed to create Audio within your ActionScript Projects. This library has more to offer including fade, pause, and mute methods… I suggest you take a look through the documentation to see what all is available. I hope you found this useful and thanks for reading!



View full post on Activetuts+

May 1, 2012 Posted on May 1, 2012 in Hints and Tips | 10 comments

Best of Tuts+ in April 2012

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!


We’ve Been in Kuala Lumpur!

This month we’ve been attending an Envato company meet-up in Malaysia. We’ve had a fun time working together as a team, made lots of exciting plans for the future of Tuts+, and also had the chance to meet up with lots of our readers! Thanks to everyone who took the time to attend our community meet-up and, if you’re interested, you can find out a bit more about our trip here (and see a few photos!)

Above: A happy bunch. Clockwise from left: Michael James Williams (Activetuts+ editor), Japh Thomson (Wptuts+ Editor), Ian Yates (Webdesigntuts+ editor), and David Appleyard (Tuts+ Manager).


Psdtuts+ — Photoshop Tutorials

  • Use Photoshop CS6 to Create a Micro Machines Inspired Scene

    Use Photoshop CS6 to Create a Micro Machines Inspired Scene

    Photoshop CS6 is packed with new features and effects that you can use in your work. In this tutorial we will utilize Photoshop’s new 3D capabilities as well as its new content aware features to create a Micro Machines inspired composition. Let’s get started!

    Visit Article

  • Create a Snowy Landscape From Desert Photography in Photoshop – Tuts+ Premium Tutorial

    Create a Snowy Landscape From Desert Photography in Photoshop – Tuts+ Premium Tutorial

    Photoshop is a great tool because it allows us to be creative and produce imagery that would be impossible to create otherwise. In this Tuts+ Premium tutorial, author Tony Aubé will create a snowy landscape from desert photography and photos of sand. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your photo manipulation skills to the next level then Log in or Join Now to get started!

    Visit Article

  • Create a Light Bulb Inspired Text Effect in Photoshop

    Create a Light Bulb Inspired Text Effect in Photoshop

    Layer styles are a powerful and time saving feature that can help you apply amazing effects to your designs. In this tutorial we will use layer styles to create a light bulb inspired text effect in Photoshop. Let’s get started!

    Visit Article


  • Nettuts+ — Web Development Tutorials

  • Meet Grunt: The Build Tool for JavaScript

    Meet Grunt: The Build Tool for JavaScript

    If you’re working on a large project, you’ll no doubt have a build script or a bunch of task scripts to help with some of the repetitive parts of the process. You might use Ant or Rake, depending on the language the project is written in.

    Visit Article

  • CSS Refreshers: Borders

    CSS Refreshers: Borders

    Sure, we’re all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there’s quite a few things in this article that you never knew about!

    Visit Article

  • Lightning Fast Folder and File Creation in Sublime Text 2

    Lightning Fast Folder and File Creation in Sublime Text 2

    I’m frequently asked about how I’m able to create new directory structures and files so quickly in Sublime Text 2. Well the answer is that this functionality is not offered natively; instead, I use a helpful plugin. I’ll demonstrate it in this video.

    Visit Article


  • Vectortuts+ — Illustrator Tutorials

  • Quick Tip: The Line of Action, Make Your Character Poses More Dynamic!

    Quick Tip: The Line of Action, Make Your Character Poses More Dynamic!

    The line of action is a key ingredient to making your character’s poses look more dynamic. In this guide, we will explore what the line of action is and how it can be used to make your character poses come alive.

    Visit Article

  • 200+ Free Vector Grunge Graphics for Designers and Illustrators

    Free Vector Grunge Graphics for Designers and Illustrators

    If you’re looking for free vector grunge graphics, such as distressed backgrounds, worn textures, dirty paint splatter, and more, then you’ve found a compilation worth downloading. We’ve collected an assortment of vector grunge illustrations, free vector grunge textures, and wickedly worn graphics available for free download. Jump in and grab these free grunge vectors now and start making grunge vector art for your next project.

    Visit Article

  • Vintage Vector Design Workflow: Creating a Retro Flyer Design

    Vintage Vector Design Workflow: Creating a Retro Flyer Design

    This tutorial will cover the process of creating a vintage inspired retro flyer design. There are four main areas of concentration to achieve this look and feel: color, type, character and texture. We’ll review a complete vintage vector design workflow to create this retro flyer design. Let’s get started.

    Visit Article


  • Webdesigntuts+ — Web Design Tutorials

  • Quick Tip: Speed Up Your Workflow With Photoshop Actions

    Quick Tip: Speed Up Your Workflow With Photoshop Actions

    Avoiding repetitive tasks is always going to speed up your workflow. In today’s Quick Tip we’ll do just that, by utilizing Photoshop’s actions panel and combining it with hotkeys. Watch this quick screencast and I guarantee you’ll save tons of time next time you’re designing!

    Visit Article

  • Building a Responsive Layout With Skeleton: Finishing Off

    Building a Responsive Layout With Skeleton: Finishing Off

    During previous screencasts in this series we’ve covered a lot of ground, building our responsive (or adaptive) layout with the Skeleton boilerplate. It’s now time to finish all the final details; arguably the most time-consuming part of any website build!

    Visit Article

  • Adobe Photoshop CS6: Improvements for Web and UI Designers

    Adobe Photoshop CS6: Improvements for Web and UI Designers

    Photoshop CS6 has been hailed as a huge improvement for web and UI designers. Im going to share with you some of the features that Photoshop CS6 Beta has to offer and demonstrate how they can help you in your web or UI design workflow.

    Visit Article


  • Phototuts+ — Photography Tutorials

  • A How-To Guide to Getting Started in Real Estate Photography

    A How-To Guide to Getting Started in Real Estate Photography

    Real estate is one of the world’s most competitive industries. Dominated by ambitious agents looking for the next big sale, selling real estate is all about setting yourself apart from the competition. What better way to catch a buyer’s eye than the perfect photo of the perfect home? In today’s article, we’re taking a look at the exciting world of real estate photography.

    Visit Article

  • A Simple Solution to White Balance and Exposure: The 18% Gray Card

    A Simple Solution to White Balance and Exposure: The 18% Gray Card

    An 18% gray card is a handy accessory that every serious photographer should keep in their bag. It doesn’t cost much and it barely takes up any space. If you encounter a situation where you have mixed lights, this unassuming piece of plastic helps you determine the white balance. It can also be used to determine the correct exposure.

    Visit Article

  • An Expert Guide to Matting and Framing a Photo

    An Expert Guide to Matting and Framing a Photo

    The final printed image is the culmination of my journey in creating a piece of artwork that represents my view of the world around me. As photographers in the digital age we spend far too much time staring at our photographs on our computer screens and very little time holding them in our hands. I still take great pride in every print I produce. There are a myriad of options for printing your work today, from canvas wraps to Metal prints, however for me there is something timeless and classic about a finely Matted and Framed print.

    Visit Article


  • Cgtuts+ — Computer Graphics Tutorials

  • Rigging A Voodoo Doll Character In Maya Using Setup Machine & Face Machine

    Rigging A Voodoo Doll Character In Maya Using Setup Machine & Face Machine

    In this tutorial you’ll learn how to create a complete character rig for a voodoo doll character in Maya using the Setup Machine and Face Machine plugins from Anzovin studios. You’ll learn how these plugins can save you valuable time during rigging by allowing you to utilize pre-built body and face rigs which can then be customized to fit you and your character’s specific needs.

    Visit Article

  • Creating A Stylish 3D Countdown Animation In Cinema 4D

    Creating A Stylish 3D Countdown Animation In Cinema 4D

    In this tutorial we’re going to create a smooth, stylish countdown animation. You can use words, letters, logos or whatever you want to make this type of animation. As you can see it’s easy to set up and looks very stylish and attractive.

    Visit Article

  • Create a 3D Micro Robotic Insect in ZBrush

    Create a 3D Micro Robotic Insect in ZBrush

    This week, Cgtuts+ has teamed up with our sister site Psdtuts+ to bring you this amazing two part, in-depth tutorial from Nacho Riesco. In this tutorial we are going to sculpt a Micro Bionic Insect with chemical war purposes using simple hard-surface modelling techniques with the Clipping Brush, Masking and much more. Head over to Psdtuts+ for the conclusion of this project where we’ll composite our render passes from Zbrush, and create the final image in Photoshop!

    Visit Article


  • Aetuts+ — After Effects Tutorials

  • Make Your Own Durable Light Dimmers For Less Than $30

    Make Your Own Durable Light Dimmers For Less Than $30

    In today’s tutorial we’re going to take you step by step through everything you need to know to build your own rugged light dimmers. We use these exact dimmers on all our studio and on location shoots. Besides being extremely durable, these little devices provide a wider range of lighting options and are surprisingly valuable when you have to light a scene in a tight location.

    Visit Article

  • Is Working On Stills Easier in After Effects or Photoshop?

    Is Working On Stills Easier in After Effects or Photoshop?

    We always tend to go to Photoshop for working with still images, but today I’d like to bring up a few thoughts about why working in After Effects might be a better solution for your next project.

    Visit Article

  • Show A Motion Path With The StroMotion Effect

    Show A Motion Path With The StroMotion Effect

    In this tutorial we will track freeze frames into a hand-held scene utilizing The Foundry’s CameraTracker to achieve an effect that is often referred to as “StroMotion”. We’ll be talking about different methods of how to remove the subject from the background and how to line everything up. Enjoy! :)

    Visit Article


  • Audiotuts+ — Audio & Production Tutorials

  • 30+ Sites That Serve Up Great Loops and Samples

    Sites That Serve Up Great Loops and Samples

    Loops can form the foundation of a track, and are useful for quickly putting some ideas together when sketching out an arrangement. Samples provide us with sounds and colors to create our music with. But where can you download great loops and samples? Here are 30+ great places to start.

    Every music producer worth his salt is in the process of building up a useful collection of useable sounds.

    Visit Article

  • Morphing in Pro Tools

    Morphing in Pro Tools

    We’ve all seen how you can morph one face into another in the graphical world. In this screencast Rishabh Rajan shows us how to achieve the same thing with audio using Pro Tools.

    Visit Article

  • 3D Mixing Part 7: Mastering, The Final Chapter (Part 1)

    D Mixing Part 7: Mastering, The Final Chapter (Part 1)

    Although this is a series on mixing, it feels incomplete not to get into at least a brief discussion on master bus options and to discuss what exactly goes on when you print all your hard work to a single and final stereo file. Due to the depth of this topic, I am splitting it into two parts.

    Visit Article


  • Activetuts+ — Flash, Flex & ActionScript Tutorials

  • What Is Dart, and Why Should You Care?

    What Is Dart, and Why Should You Care?

    In this tutorial, I’ll introduce you to Google’s new web programming language, Dart, and explain why you should like it and what you need to know about it. Learn about this new language and form some opinions about it – will it really replace JavaScript?

    Visit Article

  • Accessing the Same Saved Data With Separate Flash and JavaScript Apps

    Accessing the Same Saved Data With Separate Flash and JavaScript Apps

    In this tutorial I will show you how to access the same saved data in separate Flash and JavaScript apps, by storing it in HTML5 LocalStorage and using ExternalInterface to reach it with AS3. We will create the same app in both JavaScript and Flash to demonstrate that it is platform agnostic.

    Visit Article

  • An ImpactJS Overview: Introduction

    An ImpactJS Overview: Introduction

    Impact is an incredibly powerful HTML5 game framework which takes advantage of modern browser’s canvas element and can also run on mobile or be compile into a native iOS app. In this video I will go over the framework, how to set up a project, some background into how to create classes in it and finally go over the core classes that make up the framework. This is a high level overview which will give you a general sense for how things work.

    Visit Article


  • Wptuts+ — WordPress Tutorials

  • Mini Guide to Contact Form 7

    Mini Guide to Contact Form 7

    Usually a website needs a contact form to communicate with the site owner. One of our favorites is Contact Form 7. Let’s see what it can do!

    Visit Article

  • Custom Post Type Helper Class

    Custom Post Type Helper Class

    For a lot of WordPress projects these days we use custom post types. The WordPress development team created some handy methods to integrate them into your projects. But when you use custom post types, taxonomies and meta boxes frequently, it’s quite probable that you’re going to repeat yourself. That’s why we are going to use the power of these WordPress functions to build a more powerful class, which we can use to quickly register post types, taxonomies and meta boxes.

    Visit Article

  • Using WordPress as an Intranet

    Using WordPress as an Intranet

    When we talk about WordPress we usually associate it with either being a blogging platform or just another content management system, but what about as an Intranet? This tutorial will show you how you can turn your basic installation of WordPress into a robust Intranet for your business.

    Visit Article


  • Mobiletuts+ — Mobile Development Tutorials

  • Create an Awesome Carousel, Version 2.0

    Create an Awesome Carousel, Version 2.0

    Engage your users with stunning carousels! We’ll look at how easy and clean it can be to implement scrollable, interactive carousels in your iOS applications. With high configurability, you can have 3D, flat, rotating, and endless scrolling arrays for data, images, and buttons.

    Visit Article

  • Corona SDK: Create an Alphabet Soup Game

    Corona SDK: Create an Alphabet Soup Game

    In this tutorial series, you will learn how to create a minimalistic Alphabet Soup game. The goal of this game is to allow the player to pick words out from a jumbled set of letters. Read on!

    Visit Article

  • iOS Quick Tip: Interacting with Web Services

    iOS Quick Tip: Interacting with Web Services

    At some point in your iOS development career, you will have the need to interact with a web service from within your app. You may need to access remote data, parse a social network feed, or even download some assets into your application. This quick tip will teach you to do so without using third party libraries!

    Visit Article



View full post on Activetuts+

Apr 28, 2012 Posted on Apr 28, 2012 in Hints and Tips | 10 comments

An ImpactJS Overview: Optimization

In this video I will discus some tips and tricks for optimizing your Impact games and how to get the best performance possible across desktop to mobile. I will cover ways to reduce draw calls, how to set up setting properties for your levels and other important things I have learned through trial and error while building games with Impact.


Watch the Screencast

You can also download the video to watch later.


More Info and Links

To learn more about Impact visit http://ImpactJS.com and check out a copy of my book on Impact called Introducing HTML5 Game Development, published by O’Reilly.



View full post on Activetuts+

Apr 27, 2012 Posted on Apr 27, 2012 in Hints and Tips | 10 comments

Quick Tip: Configuring Sublime Text 2 for Dart Coding

Sublime Text 2 is a powerful text editor, popular due to its cross-platform availability and its knack for leveraging pre-existing TextMate capabilities. Combine Sublime Text 2 with Google’s new Dart language, and power coders can be very happy.


Prerequisites

In order for this to go quickly, I’ll assume that you have some foundational knowledge. You should be familiar with the following for this tip:

  • A working knowledge of Sublime Text 2 packages. Most of this tip centers on the steps required to build our own Dart package, but if you’ve never used a snippet before you might want to back up for a second and go learn more about Sublime Text first.
  • A working knowledge of Dart will also help. We won’t really be coding any Dart in this tip, but having a few Dart files around with which to test things will help greatly.
  • We’ll be checking code out of a Subversion repository, and while I’ll feed you the command to use, hopefully this isn’t your first time using Subversion.
  • Finally, a general knowledge of your particular OS is in order. We’ll need to do a small amount of configuration and if you’re comfortable, say, modifying a .bash_profile file via the Terminal, then you’ll be fine.

If you need some prior reading material, I refer you to the following:

  • Sublime Text 2 documentation (however unofficial) is kept at sublimetext.info/docs. The pages on Packages, Syntax Definitions, and Snippets were particularly useful in the writing of this tip.
  • Dart information can be found at the official site, or by following along Activetuts’ Introduction to Dart tutorial
  • Much has been written about Subversion, not to mention a complete online book. That’s a bit more than you need, as you simply need to have Subversion installed and to checkout a single folder
  • Google will be your friend when it comes to learning more about configuring your system.

Step 1: Install Dart Editor

We won’t really be using the Dart Editor (the point of this tutorial is to use Sublime Text for Dart development, after al), but the download includes the Dart SDK, which is really what we’re after. Even if you’re a hardcore Sublime Text 2 fanatic, it’s still not a terrible idea to have the “official” Dart Editor installed and handy.

On the official Dart site, you can download the Dart Editor from the following link:

http://www.dartlang.org/docs/getting-started/editor/

Under “Step 1″ of that page, you’ll find a link to a ZIP file containing the Dart Editors. It’s around 70-100 MB, depending on your OS, so it’s not a terribly heavy download. But get it started!

The Dart Editor is based on Eclipse, so if you’ve used that you’ll be right at home with the Dart Editor. I won’t be getting into details on using it in this tutorial, but feel free to play around with it. The Activetuts+ introductory Dart tutorial (currently exclusively available through Facebook) takes you through the basic usage of the Dart Editor.

Note that if you don’t want to install the Dart Editor, you can download just the Dark SDK for your OS at this URL (it’s only 2 or 3 MB):

http://www.dartlang.org/docs/getting-started/sdk/index.html


Step 2: If You Have 64-Bit Linux

If you don’t have a 64-bit Linux installation, you can skip this step. (Yep, that includes you, Windows and Mac users; scroll down for your instructions.)

If you are on a 64-bit Linux installation, you’ll need to install a 32-bit library in order to run the Dart compiler, even if you’ve downloaded the 64-bit Dart Editor. I’m not a Linux guru by any stretch, but this worked for me, on my Ubuntu 11 installation.

Go to the Software Center and search for “lib32stdc++6″ or “GNU Standard C++ Library 32 bit”. Install it. You can continue on with the next few steps while it installs – just be sure this library has successfully installed before attempting to run the build system.

Install this library if you're running 64-bit Linux

Step 3: Download Google’s Dart TextMate Language File

The TextMate language file is hosted on Google Code here (web-based view into the repository):

http://code.google.com/p/dart/source/browse/branches/bleeding_edge/dart/tools/utils/textmate/Dart.tmbundle/Syntaxes/Dart.tmLanguage

This is actually part of a larger TextMate bundle (but not that much larger), but we’re only interested in the language grammar.

Before we grab that file, create a location for it to live on your system. You’ll need to create a folder named Dart in the following location, depending on your OS:

  • Mac OS: ~/Library/Application Support/Sublime Text 2/Packages/Dart
  • Windows 7: C:\Users\Administrator\AppData\Roaming\Sublime Text 2\Packages\Dart
  • Linux: ~/.config/sublime-text-2/Packages/Dart

Then open up your command line interface and navigate to inside of that newly-created Dart folder.

Subversion doesn’t make it easy to checkout a single file, but we can export a single file. Enter this command:

svn export http://dart.googlecode.com/svn/branches/bleeding_edge/dart/tools/utils/textmate/Dart.tmbundle/Syntaxes/Dart.tmLanguage

After a moment you should have the Dart.tmLanguage file in your Dart folder.

Go ahead and try it out (you may need to restart Sublime Text). Open up a Dart file and check out the colorful syntax:

A simple Dart file in Sublime Text 2, showing off syntax highlighting
A simple Dart file in Sublime Text 2, showing off syntax highlighting

Step 4: Locate your frogc Executable

frogc is the Dart-to-JavaScript compiler. It’s a command line tool, but it’s thankfully easy to use. We’ll be using it in a Sublime Build System later to turn our Dart file(s) into JavaScript, so we don’t even need to use it on the command line anyway.

To make the Build System, we need the path to our frogc executable. This was downloaded with the Dart SDK (which you either downloaded with the Dart Editor or by itself). It will be located at dart-sdk/bin/frogc. “dart-sdk” will either be where you downloaded and unzipped the SDK by itself, or nested just inside the dart folder which also contains the Dart Editor application, which will be where you placed it.

We need a command-line-compatible path to frogc. On Mac OS, you can do this:

Open up a Terminal window and drag frogc into it. The window will contain the text of the path of the file you dropped.

For Windows:

Click in the address bar of the window. It should turn into a plain text path for the folder, which you can then copy. You’ll need to add “\frogc.bat” at the end to get the path to frogc, not just the bin folder.

If you’re on Linux, you probably already know how to do this.

Make sure the path is absolute, and readily available. Place it on your clipboard or in a scratch text file for the next step.


Step 5: Create a Dart Build System to Compile JavaScript

To make this language package really useful, we should set up a Build System, which lets us run files through a shell build command.

In Sublime Text, choose the Tools > Build System > New Build System… menu. You’ll be presented with a new file with the following default contents:

{
    "cmd": ["make"]
}

This is just a JSON object that describes a very basic build command. We’ll add much more to this to make it useful for Dart development.

With that path you determined in the last step readily available, we can edit our sublime-build file.

If you’re on Mac or Linux, change the contents of the file to:

{
    "cmd": ["/Applications/dart/dart-sdk/bin/frogc", "$file"],
    "file_regex": "^(.+\\.dart):(\\d+):(\\d+):.+\\[0m(.+)$",
    "selector": "source.dart"
}

The above is what I have on my Mac system. Where it says /Applications/dart/dart-sdk/bin/frogc, add in your own frogc path.

If you're on Windows, the file will look rather similar, but you should change the "cmd" line to:

{
    "cmd": ["cmd", "/C", "C:\\insert path here\\frogc.bat", "$file"],
    "file_regex": "^(.+\\.dart):(\\d+):(\\d+):.+\\[0m(.+)$",
    "selector": "source.dart"
}

To briefly explain what this does, the cmd property is basically just what to run on the command line. frogc is simple to use: just invoke the command and feed it a file. The $file part of that line is a variable that gets expanded automatically to the page of the current file.

On Windows, things are a little funkier by default (at least in this scenario; that's not a dig at Microsoft, I swear!). What we have will run the Windows command line (cmd) with the "don't keep the terminal window up" parameter (/C, though even the "keep the terminal window up" /K parameter doesn't show it either), and run frogc.bat, passing it the full file path. This is the quick way to get it working, but does seem to produce errors in the current build. This is probably a temporary problem, as at the time of this writing these errors are produced with the standard SDK and not the latest SDK. See the next step for an alternate route.

The file_regex line is for error reporting purposes. If a line in the output of the command matches this regular expression pattern, it's recognized as an error and pressing F4 will highlight them for you in the output panel.

Unfortunately frogc uses text-styling codes to make parts of the error message a different color and/or bold. When piped into Sublime Text, these style codes are presented as regular text, so the output can be a little hard to read, with [0m and similar codes peppered amongst the human-readable text. I'm not aware of any way around this, sadly.

The final line, selector, specifies the scope in which this Build System should take place. With this set to source.dart, Dart files should automatically choose this Build System. Sublime Text 2 knows that a ".dart" file is a, well, a Dart file thanks to the language grammar we installed.

Save this file as Dart-frogc.sublime-build in [Sublime Data]/Packages/User/Dart/


Optional Power-User Step for Windows

To avoid the aforementioned errors on Windows, and also make your build system fit more in line with the Mac and Linux versions, we can add the dart-sdk bin folder to the Windows environment, so that Sublime Text knows to look there for frogc.

To add the path, click Start, then right-click Computer, and select Properties. (Alternatively: Control Panel > System and Security > System.) Click "Advanced system settings", then on "Environment Variables."

Now, find the "path" variable, in either User Variables or System Variables (it works with either). If it doesn't exist, you can click New to create it, but if it does exist, then clicking New will overwrite it, so be careful.

Append the correct path to the end of what's already there, using a semicolon to separate it from everything else. No need to escape slashes or replace spaces with underscores or anything like that. Mine looks like:

C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Users\Administrator\Downloads\dart-win32-latest\dart-sdk\bin

(Scroll the above box to the right.)

That'll let you run frogc c:\whatever\source.dart from the command window, but it still won't work within Sublime Text 2. For some reason, ST2 on Windows requires you to specify the file extension in your build system file, like so:

"cmd": ["frogc.bat", "$file"]

At this point, you should have a usable build system on Windows that's less likely to break.


Step 6: Using the Build System

Go ahead and try our new Build System out. Open up a Dart file, and press F7 or Control-B (on the Mac, Command-B). "B" for Build.

You should see the output panel open up at the bottom, and if the Dart is error-free, you'll just see [Finished].

The Build System is successful

If you have errors, you'll get much more complex output. For example:

The Build System showing errors

When this happens, press F4 to move forward through the various lines of error, and Shift-F4 to move backward. The error line will highlight in the output panel, and your cursor will be placed at the line and column identified by the error.

The Build System highlighting an error

Step 7: Start Building Snippets

There are potentially many useful snippets to be added to a Dart bundle. Let me get you started by adding a snippet that creates a new method.

From the Sublime Text menu, choose Tools > New Snippet... You'll again be presented with a default file, this one in XML format. Change its contents to:

<snippet>
    <content><![CDATA[
${1:void} ${2:methodName}(${3:arguments}) {
    $0${1/void|(.+)/(?1:\n\treturn null;)/}
}
]]></content>
    <tabTrigger>method</tabTrigger>
    <scope>source.dart</scope>
</snippet>

Feel free to change the contents of the <tabTrigger> node from method to something else that you'll find more useful. This is what you type before pressing Tab in order to get the snippet.

Save the file as method.sublime-snippet (the extension is crucial; the base name is what your snippet will show up as in the menus), in the following location relative to your Sublime Text 2 Packages folder:

/Dart/method.sublime-snippet

You should already have the "Dart" folder from the installation of the language grammar file.

Now try out your new snippet (you may need to restart Sublime Text, but I think this is no longer an issue).

In a Dart file, type "method" (or whatever you specified, if you forged your own tab trigger), press Tab, and watch it expand. You can tab through the various stops, starting at the return type, then to the method name, and finally in between the parentheses if you want to add arguments. The last tab will drop you at the first line of the method.

The cool part is that if you change the return type from void, you get an automatic return null statement at the end of your method body. Naturally you'll want to adapt this to your needs, but hopefully it's a feature that saves a little typing. The magic happens in the unwieldy second line of the snippet; if you've never seen this before, then it's somewhat difficult to explain concisely, but it looks at the contents of the first tab stop (the return type) and if it's anything other than "void", it adds the return null. It might make sense if you've ever used Regular Expressions, particularly with the substitution syntax of /pattern/substitute/ found in Perl.

The field's wide open for the creation of time-saving Dart snippets. Feel free to post your snippets in the comments.


That's All

And there you have it; those of use who prefer a certain text editor over anything else can continue to do so, even with this new Dart language. Thanks for reading, and I hope you learned something about Sublime Text 2's extensibility along the way.



View full post on Activetuts+

Page 3 of 127«12345...102030...»Last »
search search search search search
Find an Article
Categories
  • Flash Video Training
  • Hints and Tips
  • Recommended
Please Support Our Sponsors
Recent Posts
  • Workshop Coding Challenge: Fix This Breakout Game
  • Enable the Latest AIR SDK in Flash Professional CS5.5+
  • Quick Tip: Versioning Your Files With Dropbox (via Webdesigntuts+)
  • Workshop: Nuclear Outrun – Critique
  • Understanding Variables, Arrays, Loops, and Null: The Post-it Note Analogy
Tag Cloud
2011 ActionScript Active Activetuts+ Adobe animation Basic Basix Best Build Button Character Create Creating Critique Custom design Effect Effects Files Flash from Game Guide HTML5 Introduction Macromedia Motion Muzzle part Player Premium Professional Quick Silverlight Simple Text Tool Tutorial Tuts+ Tween Using Video website Workshop
About Our Site:

Hey there and welcome to "Flash Video Training Source", a resource for anybody interested in learning more about Adobe's great tool. We feature educational videos, which will help you master Adobe Flash and help you get to know all of its features. We at "Flash Video Training Source" believe that video training and video... more

Why don't you follow us on Twitter and get the latest video tutorials twitted to your account. Just click on the floating twitter bar to your right!

Go Back In Time
May 2012
M T W T F S S
« Apr    
 123456
78910111213
14151617181920
21222324252627
28293031  
Pretty Blank Box
top

Blogroll

  • Development Blog
  • Documentation
  • Plugins
  • Suggest Ideas
  • Support Forum
  • Themes
  • WordPress Planet

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org

Archives

  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
Powered by WordPress  |  Designed by Elegant Themes  |  Lightning Fast Hosting by Site 5 Hosting