Basic Applet in a web site - Java-Gaming.org

Let's start with basic.

You want to put your game on your website but you don't know how to do it?

To do it, you will need the following conditions :

1. Your game need to be an applet.
2. You need to have a server where you can upload your code and your html page.
3. You need to package your applet in a jar file.
4. You need to write an html page to display your applet.
5. You need to upload the jar file containing the applet and the html page on your server.

Ok it might seems a bit of work at first but let's do it one step at a time.

TIP : If you are new to making game you should start with this tutorial : Basic Game

1. Making an applet

Here is a template that I use for my applet games. To make your own game, you just have to add your code in the render(Graphics2D g) and update(int deltaTime) methods. As you will see, it's very similar to the code in the Basic Game tutorial so you don't need to restart all over if you have already a finished game.

I add a little test so you can run this code directly to see what it does.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

import java.applet.Applet;
import java.awt.Canvas;
import java.awt.Dimension;
import java.awt.Graphics2D;
import java.awt.event.MouseAdapter;
import java.awt.image.BufferStrategy;

public class BasicApplet extends Applet implements Runnable{
   
   private final int width = 800;
   private final int height = 600;

   Canvas canvas;
   BufferStrategy bufferStrategy;
   Thread gameloopThread;
   
   @Override
   public void init(){
      canvas = new Canvas();
      canvas.setBounds(0, 0, width, height);
      add(canvas);
      canvas.setIgnoreRepaint(true);

      canvas.createBufferStrategy(2);
      bufferStrategy = canvas.getBufferStrategy();

      canvas.addMouseListener(new MouseControl());
      canvas.addMouseMotionListener(new MouseControl());
      canvas.requestFocus();
   }
   
   @Override
   public void start(){
      gameloopThread = new Thread(this);
      gameloopThread.start();
   }
   
   @Override
   public void stop(){
      setRunning(false);
      try {
         gameloopThread.join();
      } catch (InterruptedException e) {
         e.printStackTrace();
      }
   }
   
   private class MouseControl extends MouseAdapter{
      
   }
   
   private long desiredFPS = 60;
        private long desiredDeltaLoop = (1000*1000*1000)/desiredFPS;
    
   private boolean running = true;
   
   private synchronized void setRunning(boolean running){
      this.running = running;
   }
   
   private synchronized boolean isRunning(){
      return running;
   }
   
   public void run(){
      
      setRunning(true);
      
      long beginLoopTime;
      long endLoopTime;
      long currentUpdateTime = System.nanoTime();
      long lastUpdateTime;
      long deltaLoop;
      
      while(!isActive()){
         Thread.yield();
      }
      while(isRunning()){
         beginLoopTime = System.nanoTime();
         
         render();
         
         lastUpdateTime = currentUpdateTime;
         currentUpdateTime = System.nanoTime();
         update((int) ((currentUpdateTime - lastUpdateTime)/(1000*1000)));
         
         endLoopTime = System.nanoTime();
         deltaLoop = endLoopTime - beginLoopTime;
           
           if(deltaLoop > desiredDeltaLoop){
               //Do nothing. We are already late.
           }else{
               try{
                   Thread.sleep((desiredDeltaLoop - deltaLoop)/(1000*1000));
               }catch(InterruptedException e){
                   //Do nothing
               }
           }
      }
   }

   private void render() {
      try{
         Graphics2D g = (Graphics2D) bufferStrategy.getDrawGraphics();
         g.clearRect(0, 0, width, height);
         render(g);
         bufferStrategy.show();
         g.dispose();
      }catch(Exception e){
         e.printStackTrace();
      }
   }
   
   //TESTING
   private double x = 0;
   
   /**
    * Overwrite this method in subclass
    */
   protected void update(int deltaTime){
      x += deltaTime * 0.2;
      while(x > 500){
         x -= 500;
      }
   }
   
   /**
    * Overwrite this method in subclass
    */
   protected void render(Graphics2D g){
      g.fillRect((int)x, 0, 200, 200);
   }

}

2. Getting a webhost to display html page

If you want to put stuff on the internet you need to have a server. There is plenty of free web host solutions around. Check out this page : http://www.free-webhosts.com/webhosting-01.php

3. Packing your applet in a JAR file

a. I put all my class files and ressources (images, music) in an empty folder.
b. I open the command prompt and navigate to this folder.
c. I type the following command : jar cvf Test.jar *

If you need some help to use command prompt with java command check this link : http://www.skylit.com/javamethods/faqs/javaindos.html
If you want more info about building jar file check this link : http://download.oracle.com/javase/tutorial/deployment/jar/build.html

4. Writing your html page

Here is a simplified version of an html page just to give you an idea. The essential part is the <applet> tag. You can customize the rest of the page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html> 
 
<head> 
<title>Applet test</title> 
</head> 
 
<body> 
<h2>Applet test</h2> 
 
<applet code = 'basicGame.BasicApplet3' 
    archive = 'Test.jar', 
    width = 800, 
    height = 600 /> 
    
</body> 
 
</html>

5. Upload your jar and html page on your web host.

Usually you can access to the files on your webhost server with an ftp client. To add your files on your server, you simply need to download an ftp client (filezilla), enter your host, username and password and drag and drop the files from your computer to the server.

Here is the result of these steps : Applet Test

References

Applet : http://download.oracle.com/javase/tutorial/deployment/applet/lifeCycle.html
Webhost : http://www.free-webhosts.com/webhosting-01.php
Command prompt : http://www.skylit.com/javamethods/faqs/javaindos.html
JAR File : http://download.oracle.com/javase/tutorial/deployment/jar/build.html
Applet tag : http://download.oracle.com/javase/tutorial/deployment/applet/html.html
Filezilla : http://filezilla-project.org/

Discussion

You can find a discussion about the content of this tutorial here :

Applet
JAR and deployment