Keywords

     align Alph arrows black blue border bottom center color corners  draw drop  font height long minimum module newcounter orange positioning renewcomm rounded setcounter sffamily shadow shadows shapes simple square stalone style text thodule thick tikz tikzset   width 

EngineeringSoftwareDesign

\documentclass[tikz,border=10pt]{standalone}
\usetikzlibrary{positioning,fit,shapes.arrows,shadows}
\newcounter{module}
\setcounter{module}{0}
\renewcommand*\themodule{\Alph{module}}
\tikzset{%
  module/.style={rounded corners, align=center, font=\sffamily, thick},
  simple module/.style={module, top color=blue!10, bottom color=blue!35, draw=blue!75, text width=40mm, minimum height=15mm, drop shadow},
  square module/.style={module, draw=orange!75!black, minimum height=20mm, text width=20mm},
  long module/.style={module, draw=orange!75!black, minimum height=20mm, text width=50mm},
  combo module/.style={module, draw=blue!75!black},
  simple module/.pic={
    \stepcounter{module}
    \node (module \themodule) [simple module] {};
  },
  module down arrow/.style={module arrow, shape border rotate=-90, yshift=1.25mm},
  module up arrow/.style={module arrow, shape border rotate=90, yshift=-1.25mm},
  module right arrow/.style={module arrow, xshift=-1.25mm},
  module left arrow/.style={module arrow, rotate = -180, xshift=1.25mm},
  module rightup arrow/.style={module arrow,rotate =45, yshift=1.25mm,xshift=1.25mm},
  module rightdown arrow/.style={module arrow,rotate =-45, yshift=-1.25mm,xshift=1.25mm},
  module leftup arrow/.style={module arrow,rotate =135, yshift=1.25mm,xshift=-1.25mm},
  module leftdown arrow/.style={module arrow,rotate =215, yshift=-1.25mm,xshift=-1.25mm},
  pics/horizontal module/.style n args=3{
    code={
      \stepcounter{module}
      \coordinate (c) at (0,0);
      \node [module right arrow] at (c) {};
      \node (module \themodule-1) [square module, left=7.5mm of c] {#1};
      \node (module \themodule-2) [square module, right=7.5mm of c] {#2};
      \node (module \themodule-3) [below=1.5mm of c |- module \themodule-2.south, module] {#3};
      \node (module \themodule) [fit=(module \themodule-1) (module \themodule-2) (module \themodule-3), combo module] {};
    }
  },
  pics/vertical module/.style n args=3{
    code={
      \stepcounter{module}
      \coordinate (c) at (0,0);
      \node [module down arrow] at (c) {};
      \node (module \themodule-1) [long module, above=7.5mm of c] {#1};
      \node (module \themodule-2) [long module, below=7.5mm of c] {#2};
      \node (module \themodule-3) [above=1.5mm of module \themodule-1.north, module] {#3};
      \node (module \themodule) [fit=(module \themodule-1) (module \themodule-2) (module \themodule-3), combo module] {};
    }
  },
  module arrow/.style={single arrow, single arrow head extend=2.5mm, drop shadow, draw=gray!75, inner color=gray!20, outer color=gray!35, thick, shape border uses incircle, text height=1.5mm, text width=2.5mm, anchor=center},
  module doubleArrow/.style={double arrow, double arrow head extend=2.5mm, drop shadow, draw=gray!75, inner color=gray!20, outer color=gray!35, thick, shape border uses incircle, text height=1mm, text width=5mm, anchor=center},
}
\begin{document}
\begin{tikzpicture}
	%% Module A --- client side modules
  \pic {simple module};
  \node[] (node name) at (module A) {\large {\textbf{Client-Side}}};
  \node [module down arrow] at ([yshift=-7.5mm]module A.south) {};
  \node [module up arrow] at ([yshift=7.5mm]module A.north) {};
  \node [module left arrow] at ([xshift=-7.5mm]module A.west) {};
  	%% Module b, below module A
  \pic [below=27.5mm of module A.south] {horizontal module={Collisions with bullets, hearts and ships.}{Update player health and position}{Physics}};
  \node [module rightup arrow] at ([xshift=6.5mm,yshift=20mm]module B.east) {};
  	%% Module c, above module A
  \pic [above=33.5mm of module A.north] {horizontal module={Respond to keyboard and mouse inputs.}{Move player and shoot bullets}{Controls}};
  \node [module rightdown arrow] at ([xshift=6.5mm,yshift=-20mm]module C.east) {};
  	%% Module D, left of module A, removed phaser 
   \pic [left=45mm of module A.west] {vertical module={Load Sprites, Images and Sound from folder specific in server. Create game enviroment and create player for the client}{Play music, remove destroyed objects from client and render sprites. Update healthbar for player and output messages when player is destroyed.}{Game Engine}};
    %% Module E
   \pic [right=20mm of module A.east] {simple module};
   \node[] (node name) at (module E) {\large {\textbf{Socket-io}}};
   \node [module left arrow] at ([xshift=-7.5mm]module E.west) {};
   \node [module right arrow] at ([xshift=8.75mm]module E.east) {};
   
  	%% Module F --- server side modules
    \pic [right=19mm of module E.east] {simple module};
  \node[] (node name) at (module F) {\large {\textbf{Server-Side}}};
  \node [module right arrow] at ([xshift=7.5mm]module F.east) {};
  \node [module up arrow] at ([yshift=7.5mm]module F.north) {};
  \node [module down arrow] at ([yshift=-7.5mm]module F.south) {};
  %% Module G
    \pic [right=45mm of module F.east] {vertical module={Periodically spawn hearts and mini-ships in seperate arrays, generate bullets when user presses shoot button.}{Delete hearts and mini-ships if they go out of bounds or hit by bullet. Delete bullets if out of bounds and output log messages.}{Create Obstacles and bullets}};
   %% Module H
   \pic [above=33.5mm of module F.north] {horizontal module={Logic for when players connect and disconnect or destroyed.}{Update players location and send updates to client}{Manage Players}};
   \node [module leftdown arrow] at ([xshift=-6.5mm,yshift=-22.5mm]module H.west) {};
   %% Module I
   \pic [below=27.5mm of module F.south] {horizontal module={Load Folders (assets, sound, js files)}{Update location of obstacles at set intervals}{Manage Game Assets and Obstacles}};
   \node [module leftup arrow] at ([xshift=-6.5mm,yshift=22.5mm]module I.west) {};
%  \pic [right=42.5mm of module B.east] {vertical module={Description 3}{Description 4}};
%  \node [module down arrow] at ([yshift=-7.5mm]module C.south) {};
%  \pic [below=27.5mm of module C.south] {horizontal module={Description 5}{Description 6}};
%  \node [module down arrow] at ([yshift=-7.5mm]module D.south) {};
%  \pic [below=17.5mm of module D.south] {simple module};
\end{tikzpicture}
\end{document}
Created By David Li
2020
Created using saber