Adventures in ES2015 & WebPack

Recently I embarked on a project using the latest Javascript syntax. When I set out to build my project, I considered my options carefully. I wanted to learn something new, and generally in tech there isn’t much that’s full of shiny new things than the web dev world. What I know extremely well is games, so I setup a simple game using Phaser together with WebPack and ES2015.

Webpack

Webpack is a bundling tool, like browserify. It allows for concatenating out of the box, but is extremely pluggable, and through this allows for transpiling (for example ES2015 –> ES5), Sass/Less, and a simple webserver (via BrowserSync).  It also handles 3rd party, non-AMD module exports much better than some other AMD libraries I have used in the past.

For different file types you can define rules of how they get handled:

Here the first line tells Webpack that anything ending in .js should use the babel-loader plugin to handle these files. Since I’m using ES2015 syntax, we need this to transpile them to ES5 syntax.

The second line is loading an external node module (PIXI.js which is part of the PhaserJS node module that I’m using), that does not use a clean AMD structure.  The expose loader tells WebPack what to expose.  Using this, and defining an alias to the imported module, by specifying which module:

And then the alias:

Now to have access to pixi, you can simply:

In your code base.

ES 2015

Let me start by saying that I come from a non-javascript background. For many years, I was used to strongly typed Object Oriented languages, with built-in inheritance. Although I’ve grown to enjoy working with Javascript and it’s functional ways, I’ve always missed the strengths of having a language built for classes and inheritance. Then the ES2015 syntax came along. It’s still not widely supported, but thanks to transpiling and that magic of web development, you can build with it today. Lets go over some of my favorite features:

Classes. For real!

Yes! Finally real class syntax in JavaScript. Sure, under the hood it almost definitely uses a function and prototypes, but I’m so happy to be able to make classes in a way that’s more familiar to me. Exporting also hints at something a bit deeper:

Modules

Built-in modules. No need to mess with the overly complex requirejs syntax, or many of the other ok-but-never-quite-right AMD libraries.

Inheritance

No more weird prototype copying, actual inheritance:

Using let instead of var is still requires some effort. Coming from a strongly typed background, getting used to var was difficult enough! Another optional I’m getting used to is dropping the ; at the end of statements. Although this is much harder a habit to break, I agree with it in principle. Much like using weak typing forces much better variable naming, omitting semi-colons unclutters the codebase and prevents bad practice of multiple statements on the same line. The major downside.. going back to other languages is much harder!!!

 

 

Game Dev with Phaser – Part 2: Generative tracking

In part 1 of this series we walked through setting up your development toolchain and initializing a blank canvas. Now the boring bit is over, and we can make a game 🙂

So what are we making? I’ve personally never written car physics before, even though I’ve tweaked them several times at my first dev job. So I figured that a top down racer would be a fun challenge, as well as a cool way to learn what Phaser and it’s newly added physics system (p2) can do. Sounds simple right? Well, not so much when we jump into wheel physics, but we’ll get to that in a later.

With game development, it’s often best to get the core elements of the game right first before adding all the menus and game flow. This allows you to see if it’s fun before you dedicate a considerable amount of time. This post sets us in the right direction, with a track for our racer.

Logical turns

We’re going to have several different track pieces, which we’re going to want to stitch together. Each piece will have an entrance and exit direction, which we can use to link them up correctly when generating new sections:

sections

Here we have 2 types of track, straights and bends. Each type has a mapping from it’s current rotation to it’s exit. We also have the mapping from the entrance to the current rotation. For simplicity lets assume we’re only going up or sideways, this allows us to not have to worry about the track crossing itself. We can also assume for bends starting at the bottom, let’s split that 50/50 between rotation’s 0° and 270°.

Making a module

Ok, so we’re going to want this inside our project. First let’s create a Track.js.

This is a basic module, as you can see, there’s some standard constructs familiar from other languages and some Javascript specific things.

  • Track.TYPES is equivalent of an enum (statically added to the class)
  • Track.IMAGES is a static array
  • We have a constructor, although the syntax may no be what you’re used to, especially specifying it as a constructor after defining it.
  • Two member functions, empty for now
  • And finally we return our ‘class’ so that it can be accessed outside of this module.

Now we need to take our above logic, and turn it into code for the createNextRandom function. Let’s assume rotations are multiples of 90°:

First we set some defaults. These will be used if we are generating the first tile. If we have a previous tile, we generate a random type. Since we only have 2 types at the moment, we can just do a simple random int. Then we get the exit direction from the last tile piece created – our entrance direction.

Above we work out what rotation we need to use based on the type and the entrance direction. For straights,  if we’re coming in from the bottom, we need to generate another 0 rotation straight, otherwise we’re just going in the opposite direction from where we came in. For bends, if we’re coming in from the bottom, we can pick a random between going left or right, but from the left or right, there’s only 1 option.

After this we can actually create the part, filling in our second function:

This will actually create the image and add it to the game, or more specifically, to our sprite batch. We anchor each image at the center, allowing all rotations to occur about the same pivot. We then rotate it to the calculated rotation from above.

Now we continue our mapping of rotations to outputs. Note that at the top, we create a small container object, in which we put the image and the out direction. This can be used as an anonymous data storage, much like a struct in some other languages, and is most often used when creating a new module is too much overhead. We then push this object into our list of tiles, so that we can retrieve it later on.

Finally for the track, we create a small generate function:

This allows us to generate new chunks, with a default amount of 20 chunks at a time.

Back to the game

Putting this in the game, we can move back to our index.js. First we need to tell the index.js that we have a new module:

I’ve added the Track module to the module parameters list mentioned in Part 1. With that, we’ve included the module.

And then we need to load the images:

Here we alias to loaded paths to the names. We do this in the preload method from Part 1. Let’s also throw in some grass for a nice background.

We expand the world massively, to allow lots of room to generate more track. We then resize the world bounds, and throw in a Tile Sprite, which allows our grass to spread across the entire world. This is a great helper class in Phaser, giving us the option to cheaply render a background, and not be concerned about having to write our own tiling background. Then, we create our track, and just as a placeholder until we have a player, we tell our camera to focus on the track.

Firing up our index.html in the browser, we should see a chunk of track on screen. Visually, it’s not much for now, but next up, we’ll make something move. You can see from here how it’s easy to add different track shapes, possibly some chicanes, and any other kind of curve. As long as the output is defined and we write a mapping, we have an infinite track generator!

 

 

Game Dev with Phaser – Part 1: Setting Up

I’ve been considering writing a series of articles about developing games for some time now. Initially I wanted to cover Unity game development, because at the time there weren’t many articles on it, and most of them took a very simplistic approach to Unity, often missing some best practices which I feel are core to Unity development. Many years have passed since, and now my writers thumb is starting to twitch again.

I currently work in a fast rising Html5 startup, and while it was a big change of direction for me, it’s opened up my eyes to the power of Html5 as a game development platform. It’s surprisingly quick to build high quality games if you have the right toolset. The problems that many assume will be there, such as browser support, aren’t nearly as bad as they used to be, and the engines available are getting so good that some app store hits have been built in them. With this knowledge and new found experience, I figured I should share some information on developing a game in Html5.

 

Step 1 – Installing the toolchain:

One great thing about Html5 dev I’ve found so far, is that the best tools work on Windows, Mac and Linux. The first prerequisite is called Nodejs, which provides a package manager called NPM. You can install Nodejs from here. Once installed, the next thing you’ll need is a development environment. Many developers use Sublime Text, and while I think Sublime is awesome, I prefer Webstorm for day-to-day development, mostly because it’s more of a fully fledged IDE than Sublime, with project management, Git integration and many features that you’d expect from an IDE such as Visual Studio. If you choose to use Webstorm, it has a builtin webserver, which you’ll need for Html5 game dev. If you don’t use Webstorm, I’d suggest setting up a webserver for your OS, whether it’s some form of Apache (such as WAMP) or anything else. You can create your project directory in here.

At this point, I’d recommend setting up your project in some kind of source control. If you’re not sure why you should use source control, there’s a fantastic Stack Overflow answer here. From here, we can start installing the toolchain. At the very least, create a project directory on your hard disk, I’ve called mine awesomegame.

Open up a terminal in Mac or Linux, or Powershell on Windows and switch to your project directory. Now type the following:

This will ask you a series of questions about setting up your project, like this:

npm_init

Go with the defaults, such as index.js as the entry point.

Next up, type into your terminal:

and when that’s done (it might take a few minutes):

There’s one last pre-requisite before we can start coding, and that’s the game engine, Phaser. Since this tutorial is based on Phaser 2.2.2, you can grab that directly from here:

https://github.com/photonstorm/phaser/releases/download/v2.2.2/phaser.js

Create a lib folder in your project directory, and download this file to the lib folder. Now the tool chain is done, we can start coding!

Step 2 – Entry points

In step 1, you will have noticed that we installed requirejs. Normally when you code in javascript, you need to include all of your files in the index.html for them to work. What requirejs does is allow you to require and define them as modules, and only have one include in the index.html. Overall this makes your code cleaner and ensures that each file only has access to the modules it needs. In your project root, you’ll want to setup an index.html file, with the following:

The magic happens in the script include on line 16, which actually includes requirejs, but passes through an entry point into the game in the data-main attribute. Requirejs takes it fom there pulling in all the other required scripts. Note here that we set the body style to have no margin or padding and be 100% of the page. This allows us to get a maximum size canvas for the game.

Now create an index.js that looks like this:

Let’s break that down. As you can see, we start by configuring requirejs. We tell it that the base path is a folder called src, where we plan to put all of our classes. We can then specify any further library paths, but since we only have Phaser, we add it here. What this allows us to do is include Phaser by just adding Phaser to the module, instead of needing a full path. We do this here on line 8, by calling

and then we start our module, passing in aliases for the above require parameters

With requirejs, the function parameters match up to the array elements in the require function call. Here in theory we could change the naming of Phaser to suit our own naming convention. For example, if we feel like the namespace Phaser should be with a lowercase, we could change line 9 to:

And that would alias the module Phaser to the local variable phaser.

After this, we go ahead and create our game object. From the phaser docs, the Game constructor is as follows:

Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)

Since we don’t specify anything for parenttransparent, antialias and physicsConfig, the default values are used. We set the renderer to Phaser.AUTO, which will dynamically choose between WebGL and Canvas, based on what the browser supports. Finally, we pass in the state, which is a simple object defining some functions that Phaser will call automatically. We specify these functions directly after the game creation.

Now let’s open it up. When you open it in the browser, you’ll need to go to a url like

http://localhost:8080/awesomegame/index.html

This is what Webstorm generates for me when right clicking on my index.html file and saying open in browser. This is because you’re running it via a webserver and not just opening an index.html file directly in the browser. This will allow you to serve files to the game, which isn’t allowed with just a direct open.

With this, we now have a basic empty slate. If you open up the dev tools (right click and Inspect in Chrome), you should see something in the console log like:

That means we’re good to move on to some game development!

Gadgets Galore

As anyone who knows me is aware, I’m a bit of a gadget fan. In fact, fan might be a little bit of an understatement. Since I’m always looking for a new gadget to buy, I figured it’d be nice to have a site to tell me what gadget to buy. One thing led to another, and now whatgadgetshouldibuy.com exists.

 

gadget

 

 

Aside from being a completely useful shopping list for myself, I really played around with the technology used. I built a small REST API with PHP on the backend. The frontend communicates with this using only asynchronous Javascript queries, meaning that the site feels responsive all the time. I also used the Javascript history API very heavily to keep this one page app able to share links and to navigate back and forth.

Most of the feedback I’ve received is positive, and for some reason, I consistently get traffic from a small town in Russia. Hope this helps you decide what gadget you should buy next.

 

On Smartwatches

2015 is the year of the Internet of Things. This is what the tech media and big companies want you to believe. Like 3D TV in 2013. Except this time they’re right. Not because it’s something that they’ve suddenly decided we should buy, but because there are a lot of places that super-functional, internet-connected devices make sense. The wrist, however, isn’t really one of them. So here’s my take on smartwatches, what each manufacturer seems to be thinking and what they should be if they want to be successful.

Smartwatches, what?

Smartwatches are the combination of current gen mobile computing, and the classic wristwatch. For a fantastic history, and good read on smartwatches, I recommend this OSNews article. As usual, Thom nails it with a very detailed history, and what it means to be a watch.

The mobile phone market has, over the last few years, removed the need for a time piece. Many people check their phone for the time, and in places where you’re not sitting behind a PC, or in a room with a wall clock, you probably have your smartphone at hand. While commuting, shopping, dining or just out with friends, you always have your phone with you. The majority of wrist watch consumers use them more as fashion accessories than functional devices. Many of the younger generation have never had a need to wear a wristwatch, and so it doesn’t make much sense any more. The tech industry seems to have decided that the wristwatch just needs a technological upgrade to make it relevant. And they may be correct about that, but they may also be approaching it from a bad angle.

Everyone seems to agree that notifications are a core feature of a smartwatch. Whether it comes through your phone, or via their own data connection, a modern smartwatch seems to be defined by its ability to tell you that you’ve received a message, email or someone liked your Facebook/Instagram/Twitter post. On the surface this does seem like a good idea, but with such limited screen space and input limitations, no one seems to have really made this practical to the point of it making sense.

LG, Motorola and Android Wear in general

Android Wear is Google’s approach to smartwatches and wearables in general. The core is just to show notifications. Developers don’t have to do something for it to work, as all Android apps automatically support it. While this is great, it also means you get too many notifications most of the time. Of course, you can customize this, but most of the information isn’t practical or useful on your wrist. There are also applications for it, including maps w/ navigation, weather, music control, and there is an SDK for developers. Much of what you can do with it, requires pulling out your smartphone, or using voice input. Battery life ranges between 19 hours and 2 days.

Apple

It’s not out yet, so the speculation and hype is huge. My take is that their offering isn’t visually attractive (my opinion but also shared by many), it doesn’t seem easy to use with 15 different ways of interacting with it, and it will be insanely expensive – starting at $349. I think the end result will not be all that different from Android Wear, a mashup between notifications and applications that often require your phone or voice input. Yes, there will probably be a hype curve where big celebrities are wearing one for a year or two, but then something else will take over. Battery life is about 1 day, judging from Tim Cook’s description.

Samsung

Samsung, being Samsung, have gone for an all-in strategy. They have Android Wear devices, Tizen devices and some other weird smartband/fitness devices. At best they match Apple and Android Wear, at worst, they’re bulky, ugly, buggy and only work with one or two of their own phones.

Pebble

Interestingly, they were the first of this modern rush to the smartwatch, and still one of the most highly rated. The Pebble basically does notifications, with a few extra features such as music control. Pebble stands out in a few ways, in that there is no touch input (only real buttons), and they have a black & white E-Ink screen which barely sucks power. The end result is a week of battery life. They’re relatively ugly, although the Pebble Steel, which is a bit more expensive, has made steps to fix that.

Why not?

The big question is, why would I, as a consumer, want a smartwatch. I already have a $300-$600 phone in my pocket which gives me all this information without having another device to charge every day. If it’s just for the fashion statement, all the big watch manufacturers still exist, and we’re seeing them add some simple notification features to their watches, so why not pick up one of those? Sure, the companies selling them want you to want one, but there’s no real practical purpose for them.

The size is an issue. Being so small, not only limits the information you can show, but really hurts your ability to interact with them. People don’t use voice input. It’s a great feature to have for accessibility, and there are some limited cases where it’s practical, but for the most part, people don’t want to speak to their phone, watch or TV. The screen size is also a problem. Smartphone screens grew rapidly, even Apple was forced to acknowledge that the majority of consumers prefer bigger screens. You can’t show enough information on a 47mm (1.8 inch) screen. Sure, it worked 10 years ago, but in 2015, we have 5 inch super computers always within reach. The 1.8inch supercomputer just seems odd.

Because they have to be small to be a watch, they also don’t have room for a great battery. Traditional watch batteries last years or even decades. Smartwatch batteries last hours or days. Why is this an issue? For something to become ubiquitous, the difficulty of consistent usage needs to be as low as possible. If you forget to charge your smartwatch a few times, the chance of it ending up in a drawer increases rapidly. Tablets are starting to suffer a similar fate, many of them end up drained of power in a cupboard or drawer somewhere. The prevalence of the large screened mobile phone has made the barrier of entry for new devices very high.

Where do they make sense?

The arguments for the smartwatch range from the fair “perfect companion to your phone” to the vague “it will be used in ways we can’t imagine right now”. Most of the bulls tend to be very tied to one particular platform, be it iOS or Android ( you never really hear people defending how good Samsung’s Gear series are ). Using vague terms like “it’s a very personal device” doesn’t really justify anything. Where they do make sense is fitness features and light notifications. I have a Fitbit Flex and I often think that if it buzzed when I got a phone notification, that would be enough. What does make it practical is that I only need to charge it once a week, and that is the only time I ever take it off. Being on my wrist all the time means that even when I’m not using it actively, I have no reason to stop using it. The benefit of getting that reporting of my sleep and a little buzz pattern when I am active enough already overcomes the maintenance that I have to do on it. But now we’re not talking smartwatches anymore. We’re talking fitness trackers. And this is where the internet of things makes sense.

A note on price

In general, items don’t become mainstream until they’re cheap. As much as the tech media tends to associate Apple with the smartphone, the reason is because in the US, iPhones are cheap. They come on a contract, you generally don’t pay much up front, and you get an iPhone. The rise of the smartphone market may have been kick started by Apple, but Samsung are probably to thank for their market penetration. When sub $100 smartphones were widely available in developing countries is when they became a huge market. This is why Android has global marketshare dominance and why the Lumia 520 was the best selling Windows Phone device. Currently though, the main smartwatches are going for above $200, something most consumers don’t even feel comfortable paying for their phones. Sure there will probably be a high end luxury market here, and Apple is betting on it, but this is clearly not a general consumer product.

Conclusion

Electronics companies are trying to make new markets. Unfortunately for them, these are markets that the consumer didn’t really ask for. 3D TV was pushed on us by these same companies, and two years later are words that will forever remind us of 2013. The smartphone was coming for a long time, things evolved in that direction and Apple made a breakthrough product. But it’s pervasiveness has destroyed several markets, and no matter how much these companies try to make them reappear, they won’t for long. The smartwatch is not something that most consumers are interested in. There isn’t enough unique functionality to justify a $200+ purchase, that you have to charge on a daily basis. I applaud the internet of things, and look forward to my breadbox, fridge and coffee machine appending items to a shopping list while my thermostat grabs my location and turns up the temperature, and as I walk in the door my lights activate and my speakerbar takes over the music my phone was playing through my wireless earbuds. Once these are all reasonably priced, I can see them invading the home, but the smartwatch doesn’t seem to fit in my painting of the future.

Speeding up Windows 8.1

I like Windows 8. I won’t deny it, and i’m in a minority, but i think it’s a solid OS. Windows 8.1 has a few more nice tweaks, but i noticed that it’s a chunk slower than Windows 8.0. As far as I can tell, there are a few changes that Microsoft made that added some performance overhead. Every once in a while, my hard disk usage spikes to 100% ( from the System process ) and stays there for a while. With no SSD and a 4 year old laptop, that makes things painfully slow. Searching for apps locally is much slower than before, and seems to take ages to find anything. The main culprits seem to be the integrated Bing search and the auto syncing SkyOneDrive.  This is how I improved the performance. There’s probably more you can do, but this was already a huge step up for me.

Step one, drop the artist formerly known as SkyDrive:

Go to the PC settings app, and disable OneDrive’s sync. Sure, this will kill the nice auto backup feature, but it’ll save your harddrive.

settings

onedrive

onedrive_2

Step two, kill Bing with fire:

Still in the PC Settings, go to the Search and apps.  Then disable the Bing search.

search_1

search_2

And now your Windows 8.1 should feel as responsive as your Windows 8 was.

Caves of Steel

As some might know, I’m a fan of Sci-fi. The book I’m currently reading is Caves of Steel, by Isaac Asimov. Asimov has quickly grown to be my favorite author, i feel that Caves of Steel is one of his best works.

It’s a murder mystery novel, set in 2154. The Earth is a different place, with a population of 8 billion ( bare in mind this was written in 1953, when the Earth’s population was on 2,5 billion ), and most people live in giant metal domed Cities. Food is mostly made from farmed Yeast, in massive processing plants within the city. In one of the safest areas of New York City, the unthinkable happens. Someone is murdered. Detective Elijah Bailey is on the job. With a new partner, a robot named R. Daneel Olivaw.

Just over half way through the book, the following conversation takes place. I thought this piece very relevant. This is what makes humanity great. Our species always finds a way.

Norris said, “It looks as though the Medievalists are right.”

“You mean back to the soil? Is that it, Phil?”

“No. I mean about the robots. Back to the soil. Huh! Old Earth has an unlimited future. We don’t need robots, that’s all.”

Baley muttered, “Eight billion people and the uranium running out! What’s unlimited about it?”

“What if the uranium does run out. We’ll import it. Or we’ll discover other nuclear processes. There’s no way you can stop mankind, Lije. You’ve got to be optimistic about it and have faith in the old human brain. Our greatest resource is ingenuity and we’ll never run out of that, Lije.”

He was fairly started now. He went on, “For one thing, we can use sunpower and that’s good for billions of years. We can build space stations inside Mercury’s orbit to act as energy accumulators. We’ll transmit energy to Earth by direct beam.”

This project was not new to Baley. The speculative fringe of science had been playing with the notion for a hundred and fifty years at least. What was holding it up was the impossibility so far of projecting a beam tight enough to reach fifty million miles without dispersal to uselessness. Baley said as much.

Norris said, “When it’s necessary, it’ll be done. Why worry?”

Baley had the picture of an Earth of unlimited energy. Population could continue to increase. The yeast farms could expand, hydroponic culture intensify. Energy was the only thing indispensable. The raw minerals could be brought in from the uninhabited rocks of the System. If ever water became a bottleneck, more could be brought in from the moons of Jupiter. Hell, the oceans could be frozen and dragged out into Space where they could circle Earth as moonlets of ice. There they would be, always available for use, while the ocean bottoms would represent more land for exploitation, more room to live. Even carbon and oxygen could be maintained and increased on Earth through utilization of the methane atmosphere of Titan and the frozen oxygen of Umbriel.

Earth’s population could reach a trillion or two. Why not? There was a time when the current population of eight billion would have been viewed as impossible. There was a time when a population of a single billion would have been unthinkable. There had always been prophets of Malthusian doom in every generation since Medieval times and they had always proven wrong.

But what would Fastolfe say? A world of a trillion? Surely! But they would be dependent on imported air and water and upon an energy supply from complicated storehouses fifty million miles away. How incredibly unstable that would be. Earth would be, and remain, a feather’s weight away from complete catastrophe at the slightest failure of any part of the System-wide mechanism.

Baley said, “I think it would be easier to ship off some of the surplus population, myself.” It was more an answer to the picture he had himself conjured up than to anything Norris had said.

“Who’d have us?” said Norris with a bitter lightness.

“Any uninhabited planet.”

Acqui-hires are strange

It’s common in the tech industry for big companies to buy startups. Acqui-hires are a new trend, and what makes them interesting, is that they don’t buy the startup’s product, but their talent. What makes them ridiculous – the reason I’m writing this article – is the money being thrown around compared to the actual talent being hired. The sums of money are enormous, and often the startups are extremely young.

Recently Yahoo bought Summly for $30 million. While this is small change for Yahoo, is it a good investment? Business Insider point out many things in that article:

  • It’s a 3 person team
  • The lead developer is really young and immature ( Gizmodo made him cry )
  • The app itself has less than 1 million downloads
  • They’re based in London

To me this doesn’t sound like a well planned purchase. Are developers so hard to come by in the US that Fortune 500 companies have to pay $10 million per developer? If I was in Marissa Mayer’s shoes, I probably wouldn’t have done it. What did stand out about Summly ( and especially the CEO, Nick D’Aloisio ) is how vocal and out there their product was. I guess it was the same tactic that got that Gizmodo article which brought them into Yahoo’s crosshairs, but I’m not sure that’s a good thing.

If I was looking into acqui-hires, I wouldn’t buy the loudest company. It’s easy to scour mobile app stores to see apps/games with over 1 million downloads. Sometimes those apps are developed by single developers, or really small teams. Some of them go on to become huge ( like Instagram or WordFeud ), some stay relatively quiet ( like my own DigiClock, or Tupsu ). When they’re in that ½ million to 10 million range, is the perfect time to buy them. Those developers have proved their worth as developers, but aren’t big enough to cost the company a lot.

This also helps avoiding massive expenses on one-hit developers. When I heard about Zynga’s purchase of OMG Pop, I took a good look at their catalogue. Historically, they are not an overly successful developer, and got lucky with a fantastic game idea. Because of this, their price was over inflated. Zyga’s money could have been better spent buying a smaller developer like Evgeni Gordejev.

A little bit of market research when doing acquisitions can go a very long way! Companies like Zynga and Yahoo, who don’t have the rosiest future forecast at the moment, should probably be more cautious when splashing out large sums of cash.