Android Tutorial 💡 Tic-Tac-Toe. Simple XUI cross platform WiFi game example B4A vs B4i vs B4J - Newer developers

Peter Simpson

Expert
Licensed User
Requires B4A V9.90 or higher.

Hello fellow B4X developers.
Here is my example of using a broadcast address to automatically find another devices IP address on a network, then to use that IP address to play a game (in this case Tic-Tac-Toe) across that WiFi network (device 1 vs device 2, Android, iOS or Desktop). This tutorial not only shows you how to use UDPSocket (GetBroadcastAddress) to manipulate your routers broadcast address, but I've also used Canvas.DrawLine, SetVisibleAnimated, a Timer, XUI, Images, MediaPlayer (for sound effects), UDPPacket, ServerSocket, B4XSerializator and also B4XView to help create this example which is now based on Erels original example with some changes.

The two modules named TicTacToe.bas and ConnectPlayer.bas are in fact shared modules, thus you should place them in your shared projects modules folder as these two modules work with B4A, B4i and also B4J without any changes necessary. You DO NOT need them in your main projects folder, but if you are not using B4i or B4J then you might as well leave them where they are currently located.

What is a broadcast address (taken from wikipedia): A broadcast address is a network address at which all devices connected to a multiple-access communications network are enabled to receive datagrams, which comprise UDP and TCP/IP packets, for instance. A message sent to a broadcast address may be received by all network-attached hosts

>>> CLICK HERE <<< to download all three Tic-Tac-Toe code examples.

The B4i example can be found below

The B4J example can be found below

Please note: There are multiple ways to achieve what I've done here, I chose this way as I believe that this is one of the easiest for newer B4X developers to follow and to learn from. I would usually only use AsyncStreams (AStream.Write) with ServerSocket (Server.Listen) to send and receive data over a WiFi network, but because I wanted the devices to automatically find and connect to each other without any user interaction I decided to use UDP.

04/06/2020: Released V1.0.0.0
05/06/2020: Updated V1.0.0.1 - Replaced 3 x #If B4A / #If B4i conditions in shared modules
10/06/2020: Remove TTT sub from the main module

Libraries used:-
1591260559033.png


Android screenshot
TTTAndroid.jpg


YouTube video showing Android vs iOS



Enjoy...
 
Last edited:

thetrueman

New Member
Thanks for awaited nice sharing for good learning... 🙂

Now is there any chance to make this game to play over the internet if we know the IP via WhatsApp etc.? Thanks.
 

Peter Simpson

Expert
Licensed User
Now is there any chance to make this game to play over the internet if we know the IP via WhatsApp etc.? Thanks.
Download and study V1.0.0.1, I've updated the code to better incorporate cross platform solutions.

The IP address, over the internet through a network to a device. That would mean knowing the IP address of the router location on the web, and setting up port forwarding through the receiving router to the mobile device. You would be better of using MQTT.

I was originally thinking about making this an MQTT tutorial in the first place, but then B4X developers would first need to sign up to a free MQTT service, or setup their own locally on their WiFi network before trying out my tutorials. So I decided to go for the UDP option.

My personal MQTT service of choice is cloudmqtt.com, I 100% recommend using them to everyone. But saying that, I do have my own MQTT message broker setup on my onlne server so I don't really need to use cloudmqtt.com anymore.

@Erel has create a great MQTT tutorial (link below), you can easily adapt his code example to my Tic-Tac-Toe code above.
 
Last edited:

thetrueman

New Member
Dear Peter Simpson,
Thanks for worthy guidelines. I am old VB6 person and new to B4X and wanted to make it my future favorite.
I will try to make on online but you can do it in a better way so keep developing with MQTT while I will learn from current version and understand basics of wifi communications.
Hopefully then I will get your updated example. Basically I am aimed to make some educational stuff for my kids to work on their tabs with inter-communication with each other. I hope you and Erel will not mind to guide me for some productive work with B4X. Thanks.
 
Top