Tutorials

Phaser Buttons

Phaser Buttons

Game Development, Phaser
Phaser Buttons Phaser Buttons Source Code Button Snippets Text Of Video: Hi! This is William and today I'm going to show you how to put Phaser buttons into your game. what I've done is I've copied our basic template into a buttons folder just as I've done in the last few lessons and other added some image. images/ui/. These come from the mega template and you can find all of this on WilliamClarkson.net and I've also set up our brackets editor to point a to that buttons folder you just go file-> open folder just as we did in all the other lessons. Now I'm going to edit stateMain.s and the first thing I want to do is load that sprite sheet into the library in Phaser and we need to give it a unique ID we'll just call it buttons and then we give the path ima...
Beginner Code – lesson 1

Beginner Code – lesson 1

javascript, Tutorials
Beginner Code using Javascript Text of video for Beginner Code follows: If you ever thought you might want to be a programmer and thought that you couldn't learn? give me 2 minutes to change your mind with some basic Beginner Code! create a text file on the desktop and this will work on any computer and then in that text file I'm going write just a bit of script and here is one thing I want you know is that we have things in code called tags and most tags have an ending tag and all it is is a word with inside those > < signs and then a slash for the ending tag and this tag is a script tag that tells the computer on the start writing code to pay attention to and then I'm going to but the end tag. So script and end script copy just l...
Phaser animations

Phaser animations

Game Development, Phaser, Tutorials
Phaser animations Phaser Animation Source Code Hello I'm William Clarkson and I am going to show you how to setup Phaser animations. First I copied my basic template which you can find on my website and you can also find it in the link with the blog post that goes with this video and I renamed it animation and I've placed the images folder with one image inside a call robot that will also be available on the blog post but I downloaded it from openGameart.org though I did modify into the spritesheet and I made it basically the same way I made a sprite sheet in my last video so the first thing we need to do is add that into a preload statement to put it into Phaser's library and you can find that under the snippets on my website toolbox phaser snippets and under sprite snip...
How to load a Sprite Sheet into Phaser

How to load a Sprite Sheet into Phaser

Game Development, Phaser, Tutorials
How to load a sprite sheet into phaser Download the source files I'm going to show you a bit about how to load a sprite sheet into phaser. I'm going to use somes snippets here and you can just type them out if you like or you can go to WilliamClarkson.net/phaser-snippets It is under the toolbox menu item here and I'm going use sprite snippets today. It has everything you need to be able to load a sprite sheet into phaser except for the spritesheet, and I'm going make a simple sprite sheet here just to show you how it's done canvas is 220 by 220 and I'm going to make some squares that are hundreds pixels high and wide and let's set that at 0,0 and then I'm just a copy this square four times to change different colors so you can see how we are changing the sp...
How to add an Image to Phaser

How to add an Image to Phaser

Game Development, Phaser, Tutorials
How to add an image to Phaser Download Source Code One of the first things you need to do when making a game is to add an image, and this video will show you how to add an image to phaser. Here is the text of the video. So this video will show you how to add an image to phaser and I'm going to be using the snippets at WilliamClarkson.net and you can also get the template there which I'm gonna be using a starter code or you can watch my other video on how to set that up so here are the two snippets that we are going to be using. Insert image into library and add image to stage once you get the template you just copy it to make a new project and then given name of the project in this case others call it ADD IMAGE I'm going to take the HP logo image there and mak...
Setting up Phaser for Games

Setting up Phaser for Games

Game Development, Phaser
setting up phaser for games I've been using phaser a lot for games lately. I'm going to be posting and showing a lot of how to build games in Phaser, this video will show you how get set up! All you need is a code editor. Anyone will do. I use dreamweaver, but some I've been using Brackets. It is a nice FREE alternative. You'll need some web space, or a free local server like xampp will do. and you need some code. I've been building some snippets to make it easier. To get started: Free Code editor Local server(or web space) Some Code Snippets This Video Text of the video: Setup Phaser for Games I have been working a lot lately with something called Phaser and I want to show you how to do all sorts of cools things in it. But first we have to do the steps...

Changing the Audio Player Colors

Wordpress
Wordpress makes it easy to add an mp3 player to our post and pages, but it can be a bit boring. You can make the player stand out by tweaking the css. This is an image of the standard player that comes with wordpress and here is my modified player Below is the css code I am using to turn the player red, white and blue. Simply copy the code below and replace the color with whatever you like. You can use a plugin to set custom css code (I use simple custom css) /* yellow focus */ .mejs-controls .mejs-button button:focus { outline: none !important; } /*background color*/ .mejs-controls, .mejs-mediaelement, .mejs-container { background: url('') !important; background-color: red !important; } /* text color */ .mejs-currenttime, .mejs-duration {...

Professional looking buttons in WordPress the easy way

Tips & Tricks, Wordpress
As some of you may know I come from a background of Tech offices. I've been more used to css, html and php, than anything else when it comes to web design. Also I've alway been more of a programmer than I have  so it came as a great thrill to me that the Short code Ultimate plugin took over the job of making professional looking button in wordpress, and made it very easy to do so! It was taking me hours to get things right, until someone had told me about this plug in. Here is an example of what I am doing in the video.
Creating a WordPress Page Template

Creating a WordPress Page Template

Tips & Tricks, Wordpress
Hi! I know you are probably wondering why there is a dancing chicken on the screen, but we are going to use that fellow in a moment to do a little exercise to show how to make page tempates in WordPress. It is a powerful little trick that I picked up a month or two ago. I'm going to go to add new page in my admin panel. Over to the right you'll see a drop down of page templates. Different themes come with different ones. I've made one call quote page, because I want to add random quotes pulled from a database to certain pages on the site. If I want it to be a quote page I simply select it from the tempate menu. So I'm going to put a title of Quotes test page and content of “some cool content” select the quote page from the drop down, and I publish that. View it. And you will s

WordPress Woocommerce Changing Images on Color and Size Change

Tips & Tricks, Wordpress
Hi, so I've been asked to help with a WordPress site using Woocommerce. The goal is to be able to switch images based on size and color selection. I've decided to make a video to make it clear exactly what to do and possible help other people who might have the same problem in future. I've set up the woocommerce. I haven't added any products yet, and before I do I'm going to set up attributes. Attributes mean things like color or size. You can edit per product or you can add it here and use it on every single product that you have or not. It makes it easier if you are going to be adding a lot of product. So type color, and click add attribute. The next thing I want to do is all values to the attributes. Put in red, click add new color and repeat the steps for blue & green. Now I...