React Native

Having decided to step into the world of Mobile Software Engineering, excited for the satisfaction I’d found in developing iOS apps in XCode and Swift, I embarked upon React Native.

Getting set up took a little while. This is not a simple case of downloading an IDE to use and getting started with your first ‘Hello World’ in your shiny new language. After downloading many packages, languages (I was not expecting to require Python2 for this), and additional Android Studio tools… the emulator was still not working. I had been eager to begin a React Native application and put to the test the knowledge I’d gained about how this all works but I was struggling to get a simple app to load.

I then discovered the glorious Expo. Expo can be installed and run from bash (if Windows’ amazing start bar search will stop hiding my Git Bash from me for some reason – is it because I refuse to enable Cortana to listen in on me at all times in case I happen to mention its name? – perhaps a rambling for another time).

After struggling to get past even the dependency graph load without Expo, I immediately saw the results load on the Android Emulator I had open when I ran ‘expo start’ from within my project folder. I was so pleased that I downloaded the Expo app on a handy iOS device so I could watch both screens update simultaneously as I developed my apps.

I am always impressed at how erm – Reactive – React Native is. I can add a new <TextInput/> into my render function, save, and immediately see a new text input component on both the Android emulator and the iOS device. This is fantastic for ensuring the development of apps which are performant on either OS and perhaps encouraging continous development (ensuring that the changes made could be deployed at any time).

As I’ve been setting up React Native on my current system, the small apps I’ve developed so far have not really been blog-worthy – basic tutorial following and messing with styles etc… I’ll get back to you when I’ve made something somewhat interesting 🙂

React.js

Whilst hunting for a job, I have aimed to continue learning new things. My web development experience has sometimes led me to stackoverflow answers raving about how this question would be easily resolved using React, a JavaScript library constructed by Facebook, and I decided that, now that I have the free time to expand my skillset, React would be a good place to start.

I completed the fantastic Codecademy tutorials and various online walkthroughs until I felt that I had the basic concepts down.

React aims to create a more responsive JavaScript system in which a component changing on a web page does not result in the entire page having to reload. Sounds like common sense really but this is not how things usually work.

For example, if a single item in a list is changed, without React all that would be known is that Something has changed and the entire page and all of its components would be loaded again to bring in that change. Now that we have React, we can use something called a Virtual DOM (Document Object Model). What this allows is for the ‘changed’ model to be compared to a temporary ‘copy’ of what it looked like previously and for only the differing areas to be reloaded, saving time and allowing for an overall more responsive system.

The other area on my list had been the use of Android Studio, which had been downloaded on my laptop since I realised that I was missing using XCode in Mobile Computing and wanted to keep developing apps whilst still learning.

Whilst discovering React.js, I found out about React Native – which uses the basic principles of React to produce performant apps for iOS and Android without having to use different, specific code, languages, and environments for each. This seemed the perfect next step in my learning and I had just seen a very interesting job advertisement for a position using these technologies – so I decided to give it a go…

Doggo Generator

Today made a simple program to practice a bit of Java to make sure I still remember everything.

It may not be the neatest but it was a whole lot of fun!

First I made three classes: infoGatherer.java, Dog.java, and infoGenerator.java.

The Dog class just initialises three attributes of the class Dog and contains their getters – functions which return a value to whatever is asking for it.
package org.jennings.miriam;
public class Dog {
String breed;
int age;
String colour;
public static String getBreed(Dog dog)
{
return dog.breed;
}
public static String getColour(Dog dog)
{
return dog.colour;
}
public static int getAge(Dog dog)
{
return dog.age;
}

In infoGenerator, I decided to randomly generate values for the age, colour, and breed of the dog each time the program is run.

I set some array data – a list of values to select from – for colour and breed, and generated random numbers as indexes for these arrays to select values and for an age between 0 and 30.
I then used setters to set these generated values for the attributes seen in Dog.java.

In infoGatherer, I accessed the getters to retrieve the values held for the new dog generated, and outputted a greeting in the form:
String description = (age + " year old "+ colour + " " + breed);
System.out.println("Hi! I am a " + description + "!");

I then thought that I could do something more interesting with this description.
I wanted an image of the dog to go with the greeting, but just showing a picture of any dog wouldn’t do. These dogs were being randomly generated every time the program ran. I needed to search for a dog image matching the description every time a new description was generated.
I made another class ‘imageFinder.jpg’ and learnt how to use Jsoup – a Java library for connecting to webpages and retrieving information, and followed a tutorial at https://www.javacodeexamples.com/jsoup-download-images-from-webpage-example/815, adapting the code a little for my purposes.

This allowed me to save the first image which appeared in an image search for the description which had been generated.

Now I was obtaining a dog image saved to my laptop every time I ran my program – definitely not something I would complain about! However, I only needed one image at a time so I made the program give the image the same name every time – overwriting the saved doggo.jpg.
I then inserted a few lines to open the file which had been saved…

Desktop desktop = Desktop.getDesktop();
File file = new File("C:/Users/miria/eclipse-workspace/Fun/DogImages/doggo.jpg");
if(file.exists()) desktop.open(file);

Now my program generates a description of a new dog and then shows an image of a dog for this description.

I made a cat.

Spin-off of “Project: Wild animal”

Today I was looking through job advertisements and nothing seemed right to me. Trying to imagine what the ideal job would look like, I realised that I had lost my enthusiasm for programming things and wanted to get that back. First I thought about starting some new project but wanted to just do something quick and fun. I headed to Khan Academy, remembering how much I enjoyed Summer of Code a few years ago.
There were some challenges available which, although they were just simple drawings using shapes, were a quick fun challenge. I drew a snowman and then a cat. Here is my cat. 🙂

C++ Game Engine

I followed this tutorial to create a Game Engine in C++ and SFML .

I was apprehensive, since creating a Game Engine sounds like a vaguely daunting task.

I am getting the hang of the setup for SFML, and decided that I don’t need to keep practicing  it every time so I exported the template of the properties for this project once I had set it up so that I can reuse them in the future.

[The property changes are fairly simple.

1. Go into the Properties of the project.

2. Under C/C++ -> Additional Include Directories, put the location of the ‘include’ folder which came with your download of SFML.

3. Under Linker -> General -> Additional Library Directories, put the location of the ‘lib’ folder .

4. And under Linker -> Input -> Additional Dependencies, add the graphics, window, and system .lib file names spearated by semi-colons(;).

Press ‘Apply’ and ‘OK’]

5. Also, ensure that the .dll files are held in the Debug folder of your Project.

Once this was all complete for my Game Engine project, I began to follow the tutorial.

There’s no point in me repeating what you can find here, since I did pretty much exactly that. There were points (such as creating three separate  .cpp files for Input, Update, and Draw…?) where I was unsure whether the tutorial was going about it in the right way, but as only my third project in SFML, I didn’t feel that this was the time to be going rogue.

I will, however, summarise the Game Engine.

The Game Engine consists of 6 .cpp (C++) files and 2 .h (Header) files (not including targetver.h, stdafx.h, and stdafx.cpp, which are all there as default).

These files are: Main.cpp, Engine.cpp, and Player.cpp; Input.cpp, Update.cpp and Draw.cpp; and Engine.h and Player.h.

Main.cpp simply calls the constructor for Engine, calls the start method for Engine, and returns 0 when complete. This is the entire functionality of the program, on the highest level (the game engine is made and started, when it is finished, the program finishes).

Engine.cpp and Engine.h work together to provide the overall functionality at a slightly lower level. Engine.cpp sets up the window size and background texture when constructed, and its ‘start’ method initialises a clock and contains a while loop calling input, update (and passing it the current time), and draw methods as long a the window is open. Engine.h just contains all of the variables and methods of Engine, and is included by Engine.cpp to be able to use these.

Player.cpp and Player.h (called ‘Bob’ in the tutorial) provide player setup and functionality. The contructor brings in the texture for the player, and initialises the speed, and x-y position of the player. There are then 6 methods: getSprite(), moveLeft(), moveRight(), stopLeft(), stopRight(), and update(). The only one of any real interest is update(), which takes in a time parameter, to be multiplied by the declared speed to calculate the distance traveled and add it to the x position (right), or subtract it from the x position (left). Again, Player.h simply creates all of the required variables and methods.

Input.cpp just takes user keyboard input and calls the appropriate method- wouldn’t this be better in the Player.cpp and Engine.cpp files?

Update.cpp just calls the update method in player, passing it the time from Engine.cpp. This call could be in Engine.cpp right?

Draw.cpp clears the window, then adds in the background and player sprites and then calls display();.

And that’s it! All of these parts will work together to run a simple game, and more functionality could always be added to these components to create a more complex game using this Game Engine.

Please comment below if you can explain to me why there is a need for separate Update.cpp, Draw.cpp and Input.cpp files.

 

Pong

I followed the tutorial at http://gamecodeschool.com/sfml/coding-a-simple-pong-game-with-sfml/ for creating a Pong game in SFML.

All went pretty well, I got to grips with the setup of an SFML game, created a while loop to run it, and was impressed by the simplicity of functionality such as ‘rebounding’ off the bat or top, left, and right edges of the window:

As physics would suggest, the velocity of the ball is negated to send it back in the opposite direction.

Unfortunately, I did have- or, rather, still am having- trouble with using Text and Fonts. I thought that the issue may be with the font which I’d downloaded but I tried many different fonts without luck.

I kept getting access violation runtime exceptions thrown and couldn’t find anything to help me online.

The Pong game works, but the lives and score statuses should be shown at the top, I had to comment out these lines to be able to play the game at all.

If I figure it out, more updates soon.

Embarking on SFML

Although I have very limited experience of C++, I’m finding it easy enough to pick up as I dive into the world of SFML. I want to learn SFML so as to help Bourban with the implementation of a pirate ship game we came up with. Bourban has much more experience in both games programming in general and the use of SFML and C++, but I want to be able to be useful too.

I spent about half an hour on Friday setting up SFML in Visual Studio and following a guide to create a basic program to test that it was all working and get to grips with SFML and C++.

SFML works code

Once I had successfully completed this, I decided to begin writing a game of ‘Pong’ – the ‘Hello  World’ of games programming. I found an online guide to get me started… progress reports soon!

The Pragmatic Programmer

After reading many rave reviews online, and pondering over the price for several months, I decided to treat myself to a copy of ‘The Pragmatic Programmer’ by Andrew Hunt and David Thomas. I have been reading a little whenever I get the chance and am just about halfway through the second chapter, so thought it time I added my own ‘rave review’ to the masses.

I love this book.

Although much of the content so far has pretty much been common sense, sometimes we programmers get so engrossed in achieving the end goal of working, ‘error-less’ code that common sense and basic good practices go out the window. Avoiding duplication in its various forms, the benefits of keeping code orthogonal, and striving for reversibility are all conveyed to the user in a light-hearted, conversational, anecdote-filled manner which makes it difficult for me to choose between spending my free time reading ‘The Lord of The Rings’ or ‘The Pragmatic Programmer’. My artist of a younger sister was even interested when I read some of this book aloud to her.

There are concepts (such as implementing Orthogonality) which this book has presented in such a simple and applicable way that I wonder how I was ever confused about them when studying at uni.

This book also contains tips and reminders for a positive lifestyle as a programmer from interacting with your team in an appropriate way to expanding your knowledge portfolio in the most productive manner.

My favourite idea from Hunt and Thomas so far has been:

If you are doing very detailed implementation and coding, read a book on design and architecture. If you are doing high-level design, read a book on coding techniques.

This was not something which I had previously considered – Surely you should supplement your work using your free time if you can?

But no. This makes sense. There’s no point in becoming fed up of your work because it’s what you do in your free time too.

I would definitely recommend reading this book. It’s well worth the 20 quid or so.

My 20th Birthday

I made a YouTube playlist for my 20th birthday and have been enjoying it ever since…
Featuring many songs I love from, among others: Billy Joel, Pablo Alborán, Bon Jovi, AC/DC, Slash, Metallica, Bob Dylan, The Rolling Stones, R.E.M, ZZ Top, Pink Floyd, The Beatles, Rage Against The Machine, Green Day and, of course, Jethro Tull!
If you like a weird mix of music (or just want to see how it’s possible to have a playlist with so many amazing artists in it) – have a listen! Enjoy!

New programming post coming soon!