BattleCity game using Phaser.IO, part 3 – using Visual Studio Code.

This will be a little go back to setting up development environment. I have noticed that in some networks c9users.io is blocked by network providers firewall, that complicates developing using Cloud9 – you will net be able to preview your project.

Another good tool you could use is Visual Studio Code.

Download the tool, install it. As we already have our project in github, just select Clone Git repository, enter your repository url and credentials and that is it.

To have a quick way of previewing of our project without moving to server you can go to Extensions, search for Live Server Extension.

Visual Studio Code - live server install
Visual Studio Code – live server install

By pressing Go Live you will be able to quickly host your files and preview locally.

Visual Studio Code - go live
Visual Studio Code – go live

Visual Studio Code has nice source control integration so you will be able to view your changes and commit and push them from UI.

Visual Studio Code - source control
Visual Studio Code – source control

 

BattleCity game using Phaser.IO, part 2 – move it!

In this part we will create our player tank, add animation of our moving tank (moving left, right etc) and perform actual tank movement on pressing of corresponding cursor keys.

In preload function we should load our spritesheet. Actually it is the same image as we used for tilesheet and same spritesheet will be used for our player and enemy tank sprites and animations.

// load spritesheet for our player and enemies, all of them use same spritesheet
game.load.spritesheet('tanks', 'assets/tilemaps/tiles/battlecity_general.png', 16, 16);

Next we should declare some new variables, one for our player tanks and one for cursor keys.

var player_tank;
var cursors;

In a create function we will create our player tank, define animations for our player tank movements.

Also here we will create object responsible for reading cursor keys. Enable our player tank physics, set scale of our player tank sprites.

//create cursor key handler
cursors = game.input.keyboard.createCursorKeys();

//create our player tank, position it at x,y and use sprite sheet 'tanks'
player_tank = this.game.add.sprite(128, 448, 'tanks');
//enable physics for our player sprite so we could move it etc
game.physics.arcade.enable(player_tank);
//set initial frame for our player sprite
player_tank.frame = 0;
//scale our player sprite as all our world is scaled by 2
player_tank.scale.set(2);
//define movement animations for our player - up, down etc, provide sprite numbers, timing,
player_tank.animations.add('left', [2,3], 10, true);
player_tank.animations.add('right', [6,7], 10, true);
player_tank.animations.add('up', [0,1], 10, true);
player_tank.animations.add('down', [4,5], 10, true);

In the update function we will perform checking if any of the cursor keys is pressed, and if it is, we will start corresponding animation and player tank movement.

if (cursors.left.isDown)
{
//if left cursor is down - play left animation, add velocity
player_tank.animations.play('left');
player_tank.body.velocity.x = -100;
}
else if (cursors.right.isDown)
{
player_tank.animations.play('right');
player_tank.body.velocity.x = 100;
}
else if (cursors.up.isDown)
{
player_tank.animations.play('up');
player_tank.body.velocity.y = -100;
}
else if (cursors.down.isDown)
{
player_tank.animations.play('down');
player_tank.body.velocity.y = 100;
}
else
{
player_tank.animations.stop();
player_tank.body.velocity.x = 0;
player_tank.body.velocity.y = 0;
}
}

That`s it, if everything done correctly, then by pressing cursor keys you should be able to move your tank and this movement should be animated.

Some notes from The Spectrum Show

Some notes I made watching The Spectrum Show.

New games:

Antiquity Jones 2012 Paul Jenksinson

More Tea Vicar 2012 Cronosoft

Future Looter 2011 Timmy

Alter Ego 2011 RetroSouls

Genesis: Dawn of a new day 2010 RetroWorks

Interesting old games:

Glug Glug 1984 CRL

Ninja Hamster 1987 CRL

Worth remembering:

Arcade Pac-Man emulator for ZX Spectrum

Arcade game designer 2008 Chronosoft

 

Recommended retro ZX Spectrum related Youtube channel

If you are interested in retro computing, especially Sinclair ZX Spectrum computing, I highly recommend Paul Jenkinson The Spectrum Show if you haven’t found it yet.

It is very well made series with a nice structure: news of that era, software comparison, game reviews, new software reviews etc. Highly recommend.

 

Creating a BattleCity game using Phaser.IO, part 1

I was never a huge fan of JavaScript and I am no way front-end developer, but I like some ideas from that technology and now with dying Flash – it is definitely the future.

So in this post series, I will be making famous Nintendo (NES) Battlecity game clone using Phaser.IO, just for fun, to see how it works. To make it I decided to use some online development environment, Github for source control and .. yes that is basically all that one will need.

Setting up a development environment.

For a development environment, i have decided to code everything online using Cloud9 and Github.

First login or create your Github account. Then create a new repository.

Then you have to register for the Coud9 account and create workspace there. When creating workspace select Html5 and provide your Github repository URL in “Clone from Git..” field.

Also, go to Cloud9 settings, select SSH Keys, copy your key and then go to Github->Settings->SSH and…, press New SSH key, name it something like C9 and then paste your key and press Add SSH key.

Setting up project workspace.

In Cloud9 workspace of your project create folders:

  • assets->tilemaps->maps
  • assets->tilemaps->tiles
  • js

Create empty index.html in your main folder.

Go to phaser.io and download phaser.js then move it to js folder.

Creating tiles map.

Go to sprites resource and download Battlecity sprites (or download them here):

Download Tiled map editor, its the tool we will use to make our maps.

Start Tiled and select File->New tilest. As source select your downloaded sprites file ( i have named it /battlecity_general.png ). Set 16px for tile width and tile height.

Then select File->New map. Width 16 tiles, Height 15 tiles. Tile size 16 px.

Using your tileset draw your map ( I have used Battlecity level 1 as reference ).

Important: press embed tileset button in your map editor. That way your tilesets will be embedded to your exported JSON file.

Next, after you finish creating your map, select File->Export as and select JSON format.

Then you have to move your resources to your project workspace in Cloud9.

  • Move JSON file to maps folder.
  • Move general tiles png file to tiles folder.

Your files now should look something like that:

Loading tile map.

Now let’s populate your index.html with some HTML and JavaScript code:



<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8" />
	<title>Battlecity</title>
	<script type="text/javascript" src="js/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(512, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update });


function preload() {
    game.load.tilemap('tilemap', 'assets/tilemaps/maps/battlecity_map1.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles16x16', 'assets/tilemaps/tiles/battlecity_general.png');
}

var map;
var layer;


function create() {
    game.stage.backgroundColor = '#787878';

    map = game.add.tilemap('tilemap');
    map.addTilesetImage('battlecity','tiles16x16');
    
    layer = map.createLayer('Ground');
    layer.scale.set(2);
}

function update() {
}

</script>

</body>
</html>

My json file:

{ "height":15,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 42, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 0, 18, 20, 0, 18, 20, 0, 0, 0, 0, 0, 0, 19, 0, 17, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 17, 0, 19, 46, 0, 0, 0, 0, 18, 17, 19, 17, 20, 0, 0, 0, 0, 0, 46, 0, 0, 0, 0, 0, 18, 17, 17, 17, 20, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 18, 17, 0, 17, 20, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 17, 0, 0, 17, 0, 17, 0, 0, 18, 17, 20, 0, 0, 0, 17, 0, 17, 0, 0, 0, 0, 0, 26, 0, 18, 70, 20, 0, 0, 0, 0, 0, 0, 0],
"height":15,
"name":"Ground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":16,
"x":0,
"y":0
}],
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.0.3",
"tileheight":16,
"tilesets":[
{
"columns":25,
"firstgid":1,
"image":"battlecity_general.png",
"imageheight":256,
"imagewidth":400,
"margin":0,
"name":"battlecity",
"spacing":0,
"tilecount":400,
"tileheight":16,
"tilewidth":16
}],
"tilewidth":16,
"type":"map",
"version":1,
"width":16
}

If you did everything correctly, then after pressing Run and preview you should get something like that:

If it does not work check paths in load.tilemap and load.image functions.

Also in map.addTilesetImage(‘battlecity’,’tiles16x16′);

tiles16x16 is image name used in load.image.

battlecity is tileset name in json file, check it also.

At the end, let’s push everything to our GIT repository. In bash tab execute these commands:

  • git init
  • git add .
  • git commit -m “first commit”
  • git push

After git push you probably will be prompted to enter your GitHub username and password, so do that.

That all for this time, next time we will make something to move.

Lee Pro 1000 primer pusher plans

Here you can find Lee Pro 1000 primer pusher plans forn NotAnExpert Youtube channel:

lee pro 1000 primer pusher scaled

 

Original video describing this Lee Pro 1000 modification:

 

Calling .NET from PowerBuilder

To call .NET for PowerBuilder best option is to create Class Library in Visual Studio. Sign it. In project properties, Application, Assembly Information…, check “Make assembly COM-Visible”.

Sign it class library (project properties, Signing…).

In project properties, Application, Assembly Information…, check “Make assembly COM-Visible”.

Optional, add these attributes to your class:
[ComVisible(true)]
[ClassInterface(ClassInterfaceType.AutoDual)]
[ProgId(“ClassLibrary1.Class1”)]

Register created DLL in command lime like:

regasm /tlb “path/to/dll/file.dll” /codebase

Use it from PowerBuilder like:


OLEObject obj

Integer li_rc

obj = CREATE OLEObject
li_rc = obj.ConnectToNewObject("ClassLibrary1.Class1")

IF li_rc &lt; 0 THEN

DESTROY obj MessageBox("Connecting to COM Object Failed",     "Error: " + String(li_rc)) Return

MessageBox("Connecting to COM Object Failed",     "Error: " + String(li_rc)) Return

Return

ELSE obj.ShowMe()END IF

obj.ShowMe()

END IF

To call some web service from this DLL you add service reference and then:

BasicHttpBinding binding = new BasicHttpBinding();
EndpointAddress address =
new EndpointAddress("http://web-service-url");
var client = new ServiceReference1.YourWebServiceClient(binding, address);

var b = client.YourWebServiceMethod();

List services problem in Windows 10 and PowerBuilder .NET 12.5

Windows 10 / PowerBuilder .NET 12.5

Trying to make web service client and list services I get an error:

Windows SDK for .Net Framework 4.0 was not installed. Please install it before use this feature.

Tried to install Microsoft Windows SDK for Windows 7 and .NET Framework 4 (ISO) but that did not help.

So I downloaded ProcessMonitor to check what for PowerBuilder .NET is looking and cannot find.  Found that it is looking for [HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Microsoft SDKs\Windows\v7.1\WinSDK-NetFx40Tools-x86] and does not find it.

In my registry, I had tools in v8.0A WinSDK-NetFx35Tools-X86, so I just for test I made this new registry entry:

[HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Microsoft SDKs\Windows\v7.1\WinSDK-NetFx40Tools-x86]
“ProductVersion”=”8.0.50727”
“ComponentName”=”Microsoft Visual Studio 2012 Multi-targeting Utilities for .NET Framework 3.5”
“InstallationFolder”=”C:\\Program Files (x86)\\Microsoft SDKs\\Windows\\v7.0A\\bin\\”

And after that, list services now work in PowerBuilder .NET 12.5

 

 

 

 

Visual Studio Community – Installer failed

Running this command in command prompt should solve the issue:

“%programfiles(x86)%\Microsoft Visual Studio\Installer\resources\app\layout\InstallCleanup.exe” -full

PowerBuilder 12.5.2 / Windows 10: trouble installing .NET 4.0 SDK

For PowerBuilder WCF client to work it needs .NET 4.0 SDK. But trouble is that this SDK is provided only for Windows 7. And trying to install it on Windows 10 gives an error. The solution I found is to uninstall Microsoft Visual C++ redistributable packages and only then installing SDK for .NET 4.0, then it works.